前端第一二天学习
使用编辑器进行静态网页的制作,使用HTML、CSS相关样式
1:常用标签
<h1></h1>...<h6></h6>制定不同级别的标题 | 制定不同级别的标题 |
<p></p> | <br></br> | <pre></pre> | 段落标记 | 换行 | 预定义格式文本 |
<b></b> | <i></i> | <u></u> | <sub></sub> | <sup></sup> | 加粗 | 斜体 | 下划线 | 下角标 | 上角标 |
<ul> <ol> <li></li> <li></li> </ul> </ol> | 无序列表 有序列表 |
<a href="#"></a> | 超文本链接 |
<table> <tr> <td></td> </tr> </table> | 表格 |
1.1表格
表格是常用格式之一,结构清晰,信息表达明确、直观
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="2" width="900" border="2" align="center" cellpadding="2" cellspacing="2">
<tr>
<td>学号</td>
<td>年级</td>
<td>姓名</td>
<td>性别</td>
</tr>
<td>0010</td>
<td>信工</td>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>0011</td>
<td>信工</td>
<td>李四</td>
<td>男</td>
</tr>
</table>
</body>
</html>
1.2列表
列表分为有序、无序两种
有序列表默认对其后续子菜单排序,无序不进行此操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#h_style_one{
color: blue;
font-weight:normal;/*去掉加粗变正常*/
}
ol{
color: #3399ff;
font-size: 12px;
line-height: 24px;/*行高24px*/
}
</style>
<script type="text/javascript"></script>
</head>
<body>
<!--两个div,第一个div中标题三,下面是一个有序列表,标题三的颜色为蓝色,去掉加粗,有序列表文本为浅蓝色,大小为十二像素,行间距为24像素,
第二个div,有一个标题三,下面有一个无序列表,不设置样式
-->
<div>
<h3 id="h_style_one">好好学习</h3>
<ol>
<li>不睡觉</li>
<li>敲代码</li>
<li>喝开水</li>
</ol>
</div>
<div>
<h3>好好学习</h3>
<ul>
<li>不睡觉</li>
<li>敲代码</li>
<li>喝开水</li>
</ul>
</div>
</body>
</html>
1.3文本设置
1.3.1
字体大侠,加粗,倾斜,上下角标,下划线等为最基础标签和属性
直接写入标签,以及标签参数即可对其属性进行不同样式的更改
<body>
<font color = "green" face = "隶书" size = "16">我爱学习</font>
<b>语文</b>
<i>数学</i>
<u>英语</u>
H<sub>2</sub>o
3<sup>2</sup>=9
</body>
1.3.2
<p>原标题:小学生作文吐槽手机夺母爱职场妈妈遭遇两
难职场妈妈满腹委屈“工作太忙只是希望给孩子一个伴”
“妈妈,手机不是您的女儿,我才是啊!”近日,一... </p>
<p>原标题:小学生作文吐槽手机夺母爱职场妈妈遭遇两
难职场妈妈满腹委屈“工作太忙只是希望给孩子一个伴”
“妈妈,手机不是您的女儿,我才是啊!”近日,一... </p>
<pre>
窗前明月光,
疑是地上霜。
举头望明月,
低头思故乡。
</pre>
上述为简单的html标签
本次课程中同时使用到了css样式
css样式实例如下
<div id="Title">
<div class="Title_left">
<ul class="Title_left_ul">
<li class="Title_left_ul_china">中国大陆
<div class="Title_left_ul_li_city">
<ul>
<li>全球</li>
<li>中国大陆</li>
<li>香港</li>
<li>台湾</li>
<li>澳门</li>
<li>韩国</li>
<li>马来西亚</li>
<li>澳大利亚</li>
<li>新加坡</li>
<li>新西兰</li>
<li>加拿大</li>
<li>美国</li>
<li>日本</li>
</ul>
</div>
</li>
<li><a href="#" style="color: red;">亲,请登录</a></li>
<li class="li_left_hover"><a href="#">免费注册</a></li>
<li class="li_left_hover"><a href="#">手机逛淘宝</a></li>
</ul>
</div>
<div class="Title_right">
<ul class="Title_right_ul">
<li class="mytaobao"><a href="#">我的淘宝</a>
<div class="mytaobao_child">
<ul>
<li>已买到的宝贝</li>
<li>我的足迹</li>
</ul>
</div>
</li>
<li><a href="#">购物车</a></li>
<li><a href="#">收藏夹</a></li>
<li><a href="#">商品分类</a></li>
<li><a href="#">卖家中心</a></li>
<li><a href="#">联系客服</a></li>
<li class="mytaobao"><a href="#">网站导航</a>
<div class="mytaobao_dao_child"></div>
</li>
</ul>
</div>
</div>
上面html文件中使用较多的div划分网页结构,同时应用无序列表及其属性等对其排版,使其样式达到要求
同时建立一个css文件,如下:
#Title{
/*border-bottom: 1px solid red;*/
height: auto;
position: relative;
z-index: 2;
}
.Title_left_ul>li{
position: relative;
list-style: none;
display: inline-block;
font-size: 13px;
line-height: 40px;
margin-right: 7px;
}
.Title_left_ul_china{
border-left: 1px solid #F4F4F4;
border-right:1px solid #F4F4F4;
height: 41px;
padding-right:17px;
}
.Title_left_ul_china:hover{
background-color: white;
border-left: 1px solid silver;
border-right:1px solid silver;
}
.Title_left_ul_china:hover .Title_left_ul_li_city{
display: block;
}
.Title_left_ul_li_city{
display: none;
background-color: white;
position: absolute;
z-index:-1;
left: -1px;
width: 250px;
border: 1px solid silver;
height: 250px;
overflow-y: scroll;
}
.Title_left_ul_li_city>ul>li{
list-style: none;
line-height: 25px;
padding-left: 10px;
}
.Title_left_ul_li_city>ul>li:hover{
background-color: #d2d2d2;
}
.Title_left_ul>li>a{
color: #717171;
text-decoration: none;
}
.Title_left_ul>li:nth-child(4){
margin-left: 10px;
}
.li_left_hover>a:hover{
color: red;
}
.Title_right_ul>li{
list-style: none;
display:inline-block;
font-size: 13px;
color: #717171;
padding: 0 10px;
line-height:40px;
}
.Title_left,.Title_right{
display: inline-block;
}
.Title_right{
float: right;
}
.Title_right_ul>li>a{
color:#717171 ;
text-decoration: none;
}
.Title_right_ul>li>a:hover{
color:red;
}
css文件中主要对所使用的标签进行属性设置,通过不同的属性使网页格式符合客户要求。
css样式有众多属性关键字,大量重复熟记并加以掌握,技巧性问题较少,基础属性还是记忆为主。