个人主页的设计

今天完成了php课上的作业，给自己设计一个 个人主页

 

 

 

 

整体设计下来就是这个效果；

CSS代码：

@charset "utf-8";
body {
    background-image: url(2.webp);
    background-size:100% 100%;
    font-family: "宋体";
    font-size: 12px;
    line-height: 25px;
    color: #333;
}
.nav {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #738CAA;
    width: 800px;
    margin-right: auto;
    margin-left: auto;
}
.main {
   /* background-image: url(img_2.png);
    background-size: 100%, 100%;*/

    font-size: 20px;
    font-weight:bold;
    color: #000;
}
a {
    font-size: 14px;
    font-weight:bold;
    font-family: "微软雅黑";
}
a:link {
    color: #333;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #333;
}
a:hover {
    text-decoration: none;
    color: yellow;


}



a:active {
    text-decoration: none;
    color: #333;
}
.title {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #200F15;
    border-left-width: 5px;
    border-left-style: solid;
    border-left-color: #200F15;
    padding-left: 10px;
    color: #AD5A5A;
}

#i {

    color: red;
    font-size: 100px;

}
首页代码：
<!DOCTYPE html >
<html >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>个人主页</title>
    <link href="images/css.css" rel="stylesheet" type="text/css" />
    <style type="text/css">

    </style>
</head>

<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="nav">
    <tr>
<!--        <td><img src="images/img_1.png"  height="100" /></td>-->
        <td width="100" align="center"><a href="index.html">主页</a></td>
        <td width="100" align="center"><a href="aihao.html">我的爱好</a></td>
       <!-- <td width="100" align="center"><a href="yinyue.html">我的</a></td>-->
    </tr>
</table>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" class="main">
    <tr>
        <td></td>
    </tr>
    <tr>
        <td><table width="760" border="0" cellspacing="10" cellpadding="0">
            <tr>
                <td><p >我的个人简介。 </p>
                    <p >姓名：贾硕航</p>
                    <p >性别：男</p>
                    <p >生日：0301</p>
                    <p >学校：石家庄铁道大学</p>
                    <p >爱好：乒乓球，学习，羽毛球</p>
                    <p >你看&#8212;&#8212;</p></td>
                <td><img src="images/img_8.png" width="300" height="289" /></td>
            </tr>
            <tr>
                <td><a href="https://baike.baidu.com/item/%E6%9E%97%E4%B8%B9/2674"><img src="images/img_7.png" width="200" height="300"/></a></td>
                <td>
                    <p >好吧，我承认我兴趣广泛。 </p>
                    <p >包括吃喝玩乐睡。 </p>
                    <p >还有运动方面 </p>
                    <p >乒乓球</p>
                    <p >篮球</p>
                    <p >羽毛球。</p>
                    <p ><----点点右边的图片了解一下林丹大神。</p>
                </td>
            </tr>

            <tr>
                <td align="right"><p >学习方面：</p>
                    <p >也算是比较擅长吧， </p>
                    <p >但主动学习算不上</p>
                    <p >只能说是被卷起来的。</p></td>
                <td align="center">

                    <p id="i"> 卷 </p>

                </td>
            </tr>
        </table></td>
    </tr>
    <tr>
        <td>&nbsp;</td>
    </tr>
</table>
</body>
</html>
爱好页面的代码：
<!DOCTYPE html >
<html >
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>个人主页</title>
  <link href="images/css.css" rel="stylesheet" type="text/css" />
  <style type="text/css">

  </style>
</head>

<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="nav">
  <tr>
    <!--        <td><img src="images/img_1.png"  height="100" /></td>-->
    <td width="100" align="center"><a href="首页.html">主页</a></td>
    <td width="100" align="center"><a href="aihao.html">我的爱好</a></td>

  </tr>
</table>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" class="main">
  <tr>
    <td></td>
  </tr>
  <tr>
    <td>
      <table width="760" border="0" cellspacing="10" cellpadding="0">
        <tr>
          <td>
            <p>羽毛球：</p>
            <p>羽毛球真的会上瘾！！！</p>
            <p>羽毛球真的会上瘾！！！</p>
            <p>在大一下半学期我接触了羽毛球</p>
            <p>强身健体的同时花费也很高</p>
            <p>包括球费，羽毛球拍的费用。</p>
          </td>
          <td><img src="images/img_11.png" width="300" height="289"/></td>
        </tr>
        <tr>
          <td><img src="images/img_9.png" width="200" height="300"/></td>
          <td>
            <p>篮球： </p>
            <p>相对于羽毛球，篮球的花费就少很多了</p>
            <p>你甚至不一定要有个球</p>
            <p>走到球场和同学组一场</p>
            <p>一样可以玩的很好</p>
          </td>
        </tr>

        <tr>
          <td>
            <p>乒乓球：</p>
            <p>可以说承载了我高中的回忆</p>
            <p>高中的体育可时间比较短</p>
            <p>3年高中的时间基本体育课都在打乒乓</p>
            <p>和羽毛球类似没有身体上的直接接触</p>
            <p>但照样能强身健体</p>
          </td>
          <td><img src="images/img_10.png" width="300" height="289"/></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

两个界面用的是一个CSS文件。

比较粗糙。。。。
posted @   哈喽伍六柒  阅读(678)  评论(0)  编辑  收藏  举报
相关博文：
·  软件工程个人总结
·  结对课堂练习-地铁查询系统（5）
·  个人网页设计
·  php实验一
·  分享一个好看的个人主页源码
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
点击右上角即可分享
微信分享提示