静态网页

最新推荐文章于 2022-06-02 23:32:07 发布

qq_1036183732

最新推荐文章于 2022-06-02 23:32:07 发布

阅读量355

点赞数

本文链接：https://blog.csdn.net/qq_41984522/article/details/79904164

版权

前端第一二天学习

使用编辑器进行静态网页的制作，使用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样式有众多属性关键字，大量重复熟记并加以掌握，技巧性问题较少，基础属性还是记忆为主。

qq_1036183732

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
静态网页

前端第一二天学习使用编辑器进行静态网页的制作，使用HTML、CSS相关样式1：常用标签 &lt;h1&gt;&lt;/h1&gt;...&lt;h6&gt;&lt;/h6&gt;制定不同级别的标题制定不同级别的标题&lt;p&gt;&lt;/p&gt; | &lt;br&gt;&lt;/br&gt; | &lt;pre&gt;&lt;/pre&am
复制链接

扫一扫