案例：学成在线----CSS属性书写顺序-----7.23

最新推荐文章于 2024-07-19 15:50:46 发布

i33.

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量93

点赞数 1

分类专栏： 98的h5c3学习之路文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_50768118/article/details/125944877

版权

98的h5c3学习之路专栏收录该内容

33 篇文章 1 订阅

订阅专栏

CSS属性书写顺序（重点）

建议遵循以下顺序：
1.布局定位属性：display / position / float / clear / visibility / overflow (建议display第一个写，毕竟关系到模式)
2.自身属性：width / height / margin / padding / border / background
3.文本属性：color / font / text-decoration / text-align / vertical-align / white-space / break-word
4.其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient..

.jde {
display:block;
position:relative;
float:left;
width:100px;
height:100px;
margin:0 10px;
padding:20px 0;
font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;
co1or:#333:
background:rgba (0,0,0,.5);
border-radius:10px;
}

页面布局整体思路

为了提高网页制作的效率，布局时通常有以下的整体思路：
1,必须确定页面的版心（可视区），我们测量可得知。
2.分析页面中的行模块，以及每个行模块中的列模块。其实是页面布局第一准则。
3.一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置。页面布局第二准则。
4.制作HTML结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要。
5.所以先理清楚布局结构，再写代码尤为重要。这需要我们多写多积累。

头部制作

1.版心盒子header 1200*42的盒子水平居中对齐，上下给一个margin值就可以
2.版心盒子里面包含2号盒子logo
3.版心盒子里面包含3号盒子nav导航栏
4.版心盒子里面包含4号盒子search搜索框
5.版心盒子里面包含5号盒子user个人信息
●注意：要求里面的4个盒子必须都是浮动

导航栏注意点：
实际开发中，我们不会直接用链接a，而是用li包含链接(li+a)的做法。
1.li+a语义更清晰，一看这就是有条理的列表型内容。
2.如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名。

注意：1.让导航栏一行显示，给li加浮动，因为li是块级元素，需要一行显示。
2.这个nav导航栏可以不给宽度，将来可以继续添加其余文字。
3.因为导航栏里面文字不一样多，所以最好给链接a左右padding撑开盒子，而不是指定宽度