html+css制作简单网页界面

╰半夏微凉° 2024-02-20 08:18 29阅读 0赞

## 一.运行效果如下 ##

![860e2d7eed2447d59f8984859bcd1191.png][]

## 二.HTML ##

### 2.1关于语义化标签 ###

<section>、<header>、<footer>、<nav> 等标签被称为语义化标签（semantic tags），它们不仅仅是用来美化页面的，更重要的是它们能够为页面的结构和内容提供更加合适的语义化描述，从而有助于提高页面的可访问性和可维护性。

*  \- <section> 标签定义一个独立的区域，用于表示页面的一个部分，如文章、评论区等。一般情况下，\`<section>\` 标签会包含一个标题（可以使用 \`<h1>\`~\`<h6>\` 标签），以及一些相关的内容。
 *  \- <header> 标签定义了一个页面或一个区域的头部，通常包含一些导航链接、logo、搜索框等，是页面的一个重要组成部分。
 *  \- <footer>\`标签定义了一个页面或一个区域的尾部，通常包含版权信息、联系方式、社交媒体链接等，是页面的一个重要组成部分。
 *  \- <nav> 标签定义了一个页面的导航部分，通常包含一系列与页面主要内容相关的链接，如菜单、目录等。

使用这些语义化标签能够使 HTML 结构更加清晰、易于理解和维护，同时能够使搜索引擎更容易理解页面的结构和内容，提高网站的搜索排名。

### 2.2关于无序列表 ###

无序列表是指列表项没有编号或序号的列表，可以使用 <ul> 标签来表示。

无序列表的每个列表项使用 \`<li>\` 标签来定义，通常呈现为一个实心圆点、实心方块或其他符号。例如：

上述代码将呈现为一个无序列表，包含三个列表项，每个列表项以实心圆点作为标识符。

你可以使用 CSS 样式来更改列表项的样式，如改变标识符的颜色、形状等。例如：

ul {
      list-style-type: square; /* 使用实心方块作为标识符 */
    }
    
    li {
      color: red; /* 将列表项的文本颜色设为红色 */
    }

上述代码将使无序列表的标识符变为实心方块，将列表项的文本颜色变为红色。

总之，无序列表的语法简单，易于使用，适用于许多场合，如网站菜单、导航等。

2.3关于超链接

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<link href="css/one.css" type="text/css" rel="stylesheet"/>
    		<title></title>
    	</head>
    	<body id="one">
    		
    		<header>
    			<span><a href="#">登录</a></span>
    			<span><a href="#">注册</a></span>
    		</header>
    		
    		<article>
    		<aside>
    				<ul>
    					<li><a href="#">公司简介</a></li><br />
    					<li><a href="#">公司人员</a></li><br />
    					<li><a href="#">公司职位</a></li><br />
    					<li><a href="#">公司环境</a></li><br />
    					<li><a href="#">公司薪资</a></li><br />
    					<li><a href="#">更多咨询</a></li><br />
    					<li><a href="#">公司行政</a></li><br />
    					<li><a href="#">公司标识</a></li><br />
    					<li><a href="#">公司概况</a></li><br />
    				</ul>
    		</aside>
    		
    		<nav>
    			<p>友情链接</p>
    			<ul>
    				<li><a href="http://www.baidu.com"><img src="img/lk_logo01.jpg" alt="优酷"/></a></li>
    				<li><img src="img/lk_logo02.jpg" alt="爱奇艺" title="爱奇艺视频"/></li>
    				<li><img src="img/lk_logo03.jpg" alt="搜狐" title="搜狐视频"/></li>
    				<li><img src="img/lk_logo04.jpg" alt="pptv" title="pptv"/></li>
    				<li><img src="img/lk_logo05.jpg" alt="腾讯视频" title="腾讯视频"/></li>
    				<li><img src="img/lk_logo06.jpg" alt="pps" title="pps"/></li>
    				<li><img src="img/lk_logo07.jpg" alt="土豆网" title="土豆网"/></li>
    				<li><img src="img/lk_logo08.jpg" alt="乐观网" title="乐观网"/></li>
    				<li><img src="img/lk_logo09.jpg" alt="pp助手" title="pp助手"/></li>
    			</ul>
    		</nav>
    		
    		</article>
    		<footer>
    			<ul>
    				<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>
    				<br />
    			</ul>
    			<p>版权归未来信息学院所有,请勿随意转发信息</p>
    			<p>https:www.weilaitechnologyschool.com&pwd=1234</p>
    		</footer>
    		
    	</body>
    </html>

三.CSS

#one{
    	background-color: aqua;
    	clear: left;
    	display: flex;
    }
    
    #one header{
    	position: absolute;
    	top: 0%;
    	left: 0%;
    	width: 100%;
    	height: 60px;
    	background-image: url(../img/logo.jpg);
    	background-repeat: no-repeat;
    	background-color: white;
    	background-position:center;
    }
    
    #one header span{
    	float: left;
    	position: relative;
    	left: 85%;
    	top: 60%;
    	text-decoration: none;
    }
    
    #one header a:hover{
    	color: blue;
    }
    
    #one header a{
    	text-decoration: none;
    	color: black;
    	margin: 10px;
    }
    #one aside a:hover{
    	color: white;
    }
    
    #one aside li:hover{
    	background-color: red;
    }
    
    #one aside{
    	height: 500px;
    	width: 216px;
    	background-image: url(../img/bg.jpg);
    	position: absolute;
    	top: 12%;
    	left: 12%;
    	flex-direction: column;
    	flex: 1;
    }
    
    #one aside li{
    	margin: 1px; 
        text-align: center;
    	text-decoration: none;
    	list-style: none;
    	margin-left: -40px; /* 边框整体左移 10px */
    	padding: 2px; /* 给 li 元素设置 padding，使内容与边框有间距 */
    }
    
    
    #one aside a{
    	text-decoration: none;
    	font-size: 22px;
    	color: black;
    }
    
    #one nav{
    	width: 1000px;
    	height: 500px;
    	text-align: left;
    	font-size: 20px;
    	float: left;
    	position: absolute;
    	left: 25%;
    	top: 12%;
    	background-color: white;
    	flex: 4;
    }
    #one nav li{
    	display: block;
    	float: left;
    	list-style: none;
    	font-size: 20px;
    	margin: 20px;
    	/
    }
    
    #one nav img{
    	width: 200px;
    }
    
    #one header img {
    		width: 50%;
    		height: 1%;
    		margin: 0;
    		padding: 0;		
    }
    
    #one article{
    	justify-content: center;
    	background-color: aqua;
    }
    
    #one footer{
    	width: 100%;
    	height: 120px;
    	position: absolute;
    	top: 85%;
    	left: 0%;
    	background-color: white;
    	}
    
    
    #one footer a{
    	text-decoration: none;
    	font-size: 15px;
    	color: black;
    }
    
    #one footer a:hover{
    	color: royalblue;
    }
    
    
    #one footer li{
    	position: absolute;
    	left: 30%;
    }
    
    
    #one footer ul li {
    	  float: left;
    	  position: relative;
    	  list-style: none;
    	  bottom: 0%;
    	  text-align: center;
    	  width: 100px;
    }
    
    #one footer p{
    	text-align: center;
    }

[860e2d7eed2447d59f8984859bcd1191.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/f756a13212754d17be0498d9c5f564f1.png