网站创作技巧
- 选择属性的命名：
- 由上到下：头部（header）、导航栏（nav）、轮播背景图（banner）、轮廓图的低下（new_left,new_right）、底部（footer）等。
如果写的网站内容较多可以用一些方位名词，main_left、main_middle、main_right以及main_top、main_center、main_bottom命名class类。
其中关于编写网站是内容较多，可以用另一个HTML链接来实现替代style,<link rel="stylesheet" href="./css.index(HTML文件名称）.css">。
具体代码：
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./css.index(HTML文件名称）.css">
</head>
注：同级文件<link rel="stylesheet" href="index(HTML文件名称）.css">
一、nav
nav的写法有很多，其中宽度设置最为重要一般情况设置为width：100%；，但导航栏有表单元素时可以设置nav_left width：33.3%； nav_right width:66.6%；
注意：有表单出现一般会用到<input type="text">.nav_right input{宽高、圆角边框设置}内圆半径圆角边框border-radius:1/2（height）;
有的网站不止一个nav，首先应该让nav盒子margin：0 auto;ul中消除圆点ul{list-style: none;} 最为重要的是注意宽度限制。
二、logo
logo的制作至少需要用到两个盒子，一个父盒子，一个子盒子，子盒子中插入img图片（其中一些背景图位置background: url(images/top_icon.png)no-repeat bottom 10px right;）。
这样做的原因是margin：0 auto;（子盒子在父盒子中居中显示）。
三、banner
width: 100%;
height: 416px;
background: url(images/1546683668428.jpg) no-repeat center center;
四、news
重点：news_head模板
<div> class="item_head"><h3>学校新闻<span>NEWS</span></h3><a href="#" class="pull_right">MORE</a></div>
.item_head{
width: 1020px;
/*height: 33px;*/
margin: 20px 0 15px 0;
font-size: 18px;
line-height: 30px;
border-bottom: 2px solid #969696;
}
.item_head h3{
display: inline-block;
width: 160px;
margin: 0 0 -2px 0;
padding: 0 5px 0 15px;
line-height: 30px;
font-size: 18px;
font-weight: 800;
color: #000a1f;
border-bottom: 2px solid #002a84;
}
.item_head h3 span{
font-size: 14px;
color: #002f94;
}
.item_head a:visited, a:link{
display:inline-block;
font-size: 13px;
color: #666;
text-decoration: none;
}
.item_head a:hover{
font-size: 13px;
color: #337ab7;
}
.item_head a{
position: relative;
right: -796px;
}
font加粗<b>这是粗体文本</b>或用font weight：500px;
当一个盒子大小固定，而需要表达的文本内容有较多盒子自身大小不够用时，可以通过三步解决这个问题：
.news_middle .abstract{
width: 283px;
height:54px;
color: #EEEEEE;
font: 13px "微软雅黑";
margin: 0 0 10px;
/*white-space: nowrap;overflow: hidden;text-overflow:ellipsis;*/
display: -webkit-box;
-webkit-box-orient: vertical; /* box-orient 属性规定框的子元素应该被水平或垂直排列。从上向下垂直排列子元素。 */
-webkit-line-clamp: 3;/* 设定显示行数 */
overflow: hidden;/* 可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。 */
}
五、topics（专题）
一个专题通常分为4~5各栏目，建立一个大的父盒子，根据栏目的个数平均分配子盒子的大小。注意将栏目的class类命名为同一个名称，方便css对其整体设置。
六、footer
创建多个盒子分区域进行，盒子中可以用<p></p><span></span><a></a><h3></h3>嵌套在盒子中，注意一定要采用通配符样的操作，用一个选择器操作多个盒子的属性。
当设置浮动和元素的转化的属性，可能会产生一些麻烦，用font-size: 0;/*清除两个盒子间的间隙*/