学成在线案例

2023-12-21 23:03:45

1,CSS属性书写顺序

建议遵循以下顺序:

1,布局定位属性:

display / position / float / clear / visbility / 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...

2,页面布局整体思路

为了提高网页制作的效率,布局时通常有以下的整体思路:

1,必须确定页面的版心(可视区),我们测量可得知

2,分析页面中的行模块,以及每个行模块中的列模块,页面布局第一准则

3,一行中的列模块经常浮动布局,先确定每个列的大小,之后确定列的位置,页面布局第二准则

4,制作HTML结构,还是遵循,先有结构,后有样式的原则。结构永远最重要

5,所以,先理清楚布局结构,再写代码尤为重要,这需要我们多写多积累

3,确定版心

.w{

? ? ? ? width:1200px;

? ? ? ? margin: 0? auto;

}

?4,头部制作

1号盒子是版心盒子header 1200*42的盒子水平居中对齐,上下给一个margin值就可以

版心盒子里面包含2号盒子logo

版心盒子里面包含3号盒子nav导航栏

版心盒子里面包含4号盒子search搜索框

版心盒子里面包含5号盒子user个人信息

注意:要求里面的4个盒子必须都是浮动

导航栏注意点:

实际开发中,我们不会直接用链接a,而是用li包含链接(li + a)的做法

1,li + a语义更清晰,一看这就是有条理的列表型内容

2,如果直接用a,搜索引擎容易辨别为有堆砌关键字嫌疑(故意堆砌关键字容易被搜索引擎有降权的风险),从而影响网站排名

文章来源:https://blog.csdn.net/2301_80099706/article/details/135139128
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。