HTML网页小练习

最新推荐文章于 2023-09-07 13:18:56 发布

空凌168

最新推荐文章于 2023-09-07 13:18:56 发布

阅读量478

点赞数 8

文章标签： html css web

本文链接：https://blog.csdn.net/qq_44376244/article/details/117448412

版权

例：
HTML：

<!DOCTYPE html>
<html>	
  <head>  	
    <meta charset="utf-8">   
    <title>web前端技术应用</title>   
    <link href="style3.css" type="text/css" rel="stylesheet">    
    </head>    
  <body> 	
  <header> 	
    <h1>web前端技术应用</h1>   
  </header> 
  <section>  	
  	 <h2>学习web</h2> 	 
     <ul>
      <p><a href="HTML——构建web.html">HTML——构建web</a></p>
      <p><a href="CSS——设计web.html">CSS——设计web</a></p>
      <p><a href="JavaScript——用户端动态脚本.html">Javascript——用户端动态脚本</a></p>     
			<a><img src="web技术蛋糕.PNG"</a>			
    </ul>     
  </section>
  <aside>  	
  	 <h3><a href="web入门.html">web入门</a></h3>
      <p>Web 入门是一门介绍 Web 开发实用性的简洁系列课程。在这里你将学会如何设置构建简单网页所需的工具并发布你自己的简易代码。</p>
 	 <h4>建立你的第一个网站</h4>
      <p>构建一个专业的网站需要大量的工作，所以如果你是新手，我们鼓励你从小事做起。你不会直接建立另一个 Facebook，但建立一个个人的简单在线网站并不难，所以让我们从这里开始吧。</p>	  
	  	<p>学而不思则罔，思而不学则殆，开始愉快的web之旅</p>	  	
	  	<p> </p>	  	
  	  <p><a href="see more !.html">See more !</a></p>  
  </aside>
  <footer>
		<p>学习web开发的最佳实践</p>
  </footer>
  </body>
</html>

CSS：

* {
  box-sizing: border-box;
}
body {
  margin: 0 auto;
  min-width: 1000px;
  max-width: 1400px;
}
/* Layout */
section {
  float: left;
  width: 50%;
}
aside {
  float: left;
  width: 40%;
}
footer {
  clear: both;
}
header, section, aside,  footer {
  padding: 20px;
}
/* header and footer */
header, footer {
  border-top: 5px solid #000000;
  border-bottom: 5px solid #000000;
}
h1,h2,h3{
	color:#000000;
}
body{
	margin: 100px;
	padding: 0;
	font-family: "微软雅黑";
}