css页面布局

CSS属性书写顺序（重点）

建议遵循以下顺序:

1. 布局定位属性:display / position/ float / clear / visibility / overflow（建议display第一个写，毕竟关系到模式)

1. 自身属性:width / height / margin / padding / border / background

1. 文本属性:color / font / text-decoration / text-align /vertical-align / white- space / break-word

1. 其他属性（CSS3 ) : content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient.

口诀：

圆角阴影随后写，offer接到手酸胀！

样式顺序有讲究，否则显得不专业

转换浮动藏溢出，宽高边距接着列

边框背景不能忘，文字属性紧跟上

例如：

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

页面布局整体思路

1. 为了提高网页制作的效率，布局时通常有以下的整体思路：

1. 必须确定页面的版心（可视区），我们测量可得知。

   
   （图片来源网络，侵删）

1. 分析页面中的行模块，以及每个行模块中的列模块。其实页面布局第一准则。

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

1. 制作HTML结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要。

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

导航栏注意点：

实际开发中，我们不会直接用链接a而是用li包含链接（li+a）的做法。

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

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

注意：

让导航栏一行显示，给li加浮动，因为li是块级元素，需要一行显示。

这个nav导航栏可以不给宽度，将来可以继续添加其余的文字。

因为导航栏里面文字不一样多，所以最好给链接a左右padding撑开盒子，而不是指定宽度。

本网站所收集的部分公开资料来源于AI生成和互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。