在网页设计中,没有什么比自己的个人主页更重要了。在制作自己的主页时,CSS是一个必不可少的工具。下面我们来看看如何使用CSS来制作个人主页。<html> <h
在网页设计中,没有什么比自己的个人主页更重要了。在制作自己的主页时,CSS是一个必不可少的工具。下面我们来看看如何使用CSS来制作个人主页。
<html> <head> <title>我的个人主页</title> <style type="text/css"> /*重置样式*/ body,ul,ol,li,h1,h2,h3,h4,h5,h6,p,form,fieldset,input,textarea,th,td,div{margin:0;padding:0;} body{font-size:14px;background:#E4E4E4;} /* 设定页面布局 */ #container{width:980px;margin:0 auto;} #header {width:980px;height:50px;background-color:#333; color:#fff;margin-top:5px;} #main {width:980px;margin-top:5px;height:800px;background-color:#F5F5F5;} #footer {width:980px;height:30px;background-color:#333; color:#fff; margin-top:5px;} /* 设定字体样式 */ h1{font-size:50px;text-align:center;} h2{font-size:30px;text-align:center;} p {font-size:16px;line-height:1.5em;text-indent:2em;} /* 设定链接样式 */ a:link,a:visited{color:#333;text-decoration:none;} a:hover,a:active{color:#333;text-decoration:underline;} /* 设定图片样式 */ img {border:none;} </style> </head> <body> <div id="container"> <div id="header"> <h1>我的个人主页</h1> <h2>欢迎来到我的主页!</h2> </div> <div id="main"> <p>这里是我的主页,我会在这里分享我的心情,生活和一些有趣的事情。如果您想要了解更多关于我的信息,可以点击<a href="#">这里</a>。</p> <img src="images/myphoto.jpg" alt="我的照片" width="200" height="200" /> </div> <div id="footer"> <p>版权所有:?2021 me</p> </div> </div> </body> </html>
以上就是使用CSS来制作个人主页的步骤。通过重置样式、设定页面布局、字体样式、链接样式和图片样式,我们可以轻松地制作出一个美观、实用的个人主页。
粉丝
0
关注
0
收藏
0