网页样式

时间：2019-03-04 22:18:35 阅读：261 评论：0 收藏：0 [点我收藏+]

一、为什么需要样式表？

1.HTML标签的外观样式比较单一

2. 样式表可以美化网页，使页面更漂亮

3.样式表可以在多个网页中共享使用，提高工作效率

4.样式表能实现内容与样式的分离，方便团队开发

<div>是个逻辑容器标签，方便控制管理

二、选择器的分类

标签选择器：

类选择器：前面加.

id选择器:与类选择器不同，只能在HTML页面中使用一次，前面加#

三、使用CSS控制页面的方法

行内样式：维护成本高，网页变得很大，不推荐使用

内嵌样式表

外部样式表：链接外部样式表，导入外部样式表

四、样式的优先级

行内样式>内嵌样式表>外部样式表

五、列表的属性

1.list-style-type

disc:原黑点

circle：空心圆点

square：小黑方块

none：无列表项标志

2.list-style-image

3.list-style-position

outside：项目标记在文本以外，环绕文本不根据标记对齐

inside：项目标记在文本以内，环绕文本根据标记对齐

六、背景属性

background-color：背景颜色

background-image：背景图像

background-repeat：背景的重复方式

background-position：背景图像的起始位置

七、边框

技术分享图片

八、定位属性

CSS定位允许对元素进行定位

position：定位

float：浮动

z-index:空间位置

九、使用CSS控制超链接

未访问的超级链接 a:link{color:#000000}

已访问的超级链接 a:visited{color:#000000}

鼠标移到超链接上 a:hover{{color:#000000}

鼠标选中激活链接 a:active{{color:#000000}

十、使用CSS控制元素的显示

display：none;

display：block;

十一、今天练习的当当网导航菜单

HTML代码

<html>
   <head>
       <meta charset="UTF-8">
       <title>当当网导航菜单</title>
       <link rel="stylesheet" type="text/css" href="css/dangdang.css"/>
   </head>
   <body>
       <div id="welcome" class="wrap">
       <ul>
           <li class="login">欢迎光临当当网，请<a href="#">登录</a> <a href="#">免费注册</a></li>
           <li class="shopping"><a href="#">购物车</a></li>
           <li><em></em><a href="#">我的订单</a></li>
           <li><em></em><a class="arrow" href="#">我的当当</a></li>
           <li><em></em><a class="arrow" href="#">礼品卡</a></li>
           <li><em></em><a href="#">帮助</a></li>
       </ul>
       </div>
       <div id="mainNav" class="wrap">
           <div id="logo"><img src="images/dangdang/logo.gif"/> </div>
           <div class="large">
               <div class="organge">网上购物享当当</div>
               <ul>
                   <li class="home"><a href="#">首页</a></li>
                   <li><a href="#">图书</a></li>
                   <li><a href="#">百货</a></li>
                   <li><a href="#">品牌</a></li>
                   <li><a href="#">促销</a></li>
               </ul>
           </div>
           <div class="side">
               <ul>
                   <li><a href="#">商家</a></li>
                   <li><em></em><a href="#">当当网</a></li>
                   <li><em></em><a class="arrow" href="#">礼物</a></li>
                   <li><em></em><a href="#">正在读书</a></li>
                   <li><em></em><a class="arrow" href="#">更多服务</a></li>
               </ul>
           </div>
       </div>
       <div id="navbar">
   <ul class="wrap">
       <li><a href="#">音乐</a></li>
       <li><em></em><a href="#">影视</a></li>
       <li><em></em><a href="#">少儿</a></li>
       <li><em></em><a href="#">教辅</a></li>
       <li><em></em><a href="#">小说</a></li>
       <li><em></em><a href="#">外语</a></li>
       <li><em></em><a href="#">数码相机</a></li>
       <li><em></em><a href="#">笔记本</a></li>
       <li><em></em><a href="#">连衣裙</a></li>
       <li><em></em><a href="#">高跟鞋</a></li>
       <li><em></em><a href="#">运动鞋</a></li>
       <li><em></em><a href="#">美容护肤</a></li>
       <li><em></em><a href="#">厨卫用品</a></li>
       <li><em></em><a href="#">婴幼奶粉</a></li>
       <li><em></em><a href="#">玩具</a></li>
       <li><em></em><a href="#">没事保健</a></li>
       <li><em></em><a href="#">饰品</a></li>
    </ul>
</div>
   </body>
</html>

CSS代码

body{ margin: 0; padding: 0;font-size: 12px;
line-height: 22px; }
ul,li{margin: 0; padding: 0;}
ul{list-style: none;}
.wrap{width: 960px; margin:0 auto;}
#welcome ul{margin-left:450px ;}
#welcome ul li{float: left;}
#welcome ul li a{color: #000000;
text-decoration: none; margin: 0 5px;}
#welcome ul li.login a{color: #1a66b3;}
#welcome ul li.shopping{background: url(../images/dangdang/shopping.gif)left
center no-repeat; padding-left: 20px;}
#welcome ul li em{display:block ; float: left;
height: 7px; margin: 6px 0;
border-right: 1px solid #bcbcbc; overflow: hidden;}
#welcome ul li a.arrow { background:url(../images/dangdang/arrow.gif) right center no-repeat; padding-right:12px; }
#mainNav #logo{float: left; width: 160px; text-align: center;}
#mainNav .large{float: left; width: 450px;}
#mainNav .large .organge{color: #ff6600;}
#mainNav .large ul li{float: left;
margin: 0 2px; line-height: 30px;
font-size:14px ; text-align: center;
font-weight: bold;}
#mainNav .large ul li a{display: block;
background: url(../images/dangdang/nav_bg.gif);
width: 77px; text-decoration: none;
color: #333;}
#mainNav .large ul li.home a{
background:url(../images/dangdang/nav_home.gif);
width: 59px; color: white;}
#mainNav .side{float: right;margin-top: 30px;}
#mainNav .side ul li{float: left;font-weight: bold;}
#mainNav .side ul li em{display:block ; float: left;
height: 7px; margin: 6px 0;
border-right: 1px solid #bcbcbc; overflow: hidden;}
#mainNav .side ul li a{margin: 0 5px; color: #333; text-decoration: none;}
#mainNav .side ul li a.arrow { background:url(../images/dangdang/arrow.gif) right center no-repeat; padding-right:12px; }
#navbar{clear: both; background: #fc883b; height:30px;margin-top: 0;}
#navbar ul li{float: left;line-height: 30px;}
#navbar ul li a{color: #FFFFFF;text-decoration: none;padding: 0 5px;}
#navbar ul li em{display: block;float: right; border-left: #dc6b04; border-right:1px solid #fba455;
height: 5px; margin: 12px 0;}

运行结果

技术分享图片

十二、今天遇到的问题

上下两个盒子之间有空隙，看了半天的CSS代码，才找到我把上面的盒子应该设置padding-top的值设置成了padding，所以导致两个div之间有空隙。

父盒子中的子盒子使用margin-top不管用，需要在子盒子上加{height:0；overflow:hidden}。父盒子没有设置高度，子盒子都设置了浮动，此时需要清理浮动，在CSS中设置clear：left/right/both。

我觉得我的CSS代码写得太乱了，明天一定要好好整理一下。

今天学习一天下来，觉得知识点很零散，需要记忆的东西太多了。

明天继续加油。

十三、昨天学习的一些HTML

表单

文本输入框：<input name="username" type="text"/>

密码框：<input name="pwd" type="password"/>

单选按钮：<input name="sex" type="radio" value="女"/>

多选按钮：<input name="fruit" type="checkbox" value="苹果"/>

按钮：<input name="btn" type="button" value="普通按钮"/>

下拉列表：

</select>

多行文本域：<textarea name="content" cols="20" rows="5"></textarea>

网页样式

原文：https://www.cnblogs.com/zp-frighting/p/10473098.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)