[分享]css中怎样制作个人主页

发布于 2024-11-11 19:16:55

在网页设计中，没有什么比自己的个人主页更重要了。在制作自己的主页时，CSS是一个必不可少的工具。下面我们来看看如何使用CSS来制作个人主页。我的个人主页 /重置样式/ body,ul,ol,li,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:***px;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来制作个人主页的步骤。通过重置样式、设定页面布局、字体样式、链接样式和图片样式，我们可以轻松地制作出一个美观、实用的个人主页。

css 教程