个人网站建设 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    ><meta name="author" content="order by dede58.com/" />
<title>GHY个人博客</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
    <header>
        <nav id="nav">
        <ul>
        <li><a href="#">网站首页</a></li>
        <li><a href="https://home.cnblogs.com/u/gaohuaiyu/" target="_blank" title="个人博客网站">关于我：j'k个人博客</a></li>
        <li><a href="333.jpg" target="_blank" title="个人博客网站">相册</a></li>
        <li><a href="#" target="_blank" title="个人博客网站">文章</a></li>
        <li><a href="#" target="_blank" title="个人博客网站">日志</a></li>
        </ul>
        <script src="js/silder.js"></script><!--获取当前页导航 高亮显示标题--> 
</nav>
    </header>
    <div id="mainbody">
        <div class="info">
            <div class="pt">
                <img src="2.14.jpg">
                
            </div>
            <div class="card">
                <h1>我的名片</h1>
                <p>网名：高槐玉在隐身</p>
                <p>电话：13107178558</p>
                <p>Email：2350989985@qq.com</p>
            </div>
        </div>

    </div>
</body>
</html>



@charset "utf-8";
/* CSS Document */
*{margin:0px; padding:0px;}
body{
    font:12px Verdana, Geneva, sans-serif,"宋体";
    color:#CFC;
    background-color:#333;
    line-height:1.5;
    }

header{
    width:100%;
    height:70px;
    background-color:#222;
    border-bottom:1px solid #666;
    }
header nav{
    margin:0 auto;
    text-align:center;
    width:1000px;
    padding-top:15px;
    }
header nav ul li{
    line-height:40px;
    display:inline;
    }
header nav ul li a{
    color:#FCC;

实验源码

 

实验截图：

 

实验体会：

总的实验体会就是感受到了css功能的强大与丰富，在实验中我借鉴了其他优秀的作品，

参照他们的设计美学去学习，然后运用到自己的实验作品上，同时也对他们代码中一些

不懂的地方去浏览器搜索，每一次搜索了解都增加了我的HTML知识，通过这一次实验

我觉得对于HTML和CSS都有极大的提高，能做出这样一个个人网站也有一定的成就感

，收获颇多。

 

posted @ 2022-03-20 22:10  高槐玉在隐身  阅读(34)  评论(0)    收藏  举报