网站创作技巧
- 选择属性的命名:
- 由上到下:头部(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;/*清除两个盒子间的间隙*/