阅读模式:

HTML+CSS制作博客园主页

阅读量:25  一键切换:繁體   HtmlCss  发布时间:来源:知识库  
内容摘要:这学期学习了PHP这门课程,老师在前两周教我们CSS和HTML致死,这次制作博客园主页便是对前两周的学习作为总结吧,个人审美天赋不高,制作的还是稍微有点乱以后慢慢改进。下面是我的效果图以及实验代码:  这是整体架构:Four(1).html......

HTML+CSS制作博客园主页

  这学期学习了PHP这门课程,老师在前两周教我们CSS和HTML致死,这次制作博客园主页便是对前两周的学习作为总结吧,个人审美天赋不高,制作的还是稍微有点乱以后慢慢改进。下面是我的效果图以及实验代码:

  这是整体架构:

Four(1).html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">

        #main-top{
            width: 100%;
            height: 150px;
        }
        #main-left{
            width:15%;
            height: 950px;
            float: left;
            /* background-color: yellow; */
        }
        #main-right{
            width: 25%;
            height: 950px;
            float: left;
            text-align: center;
            /* background-color: aquamarine;  */
        }
        #main-middle
        {
            float:left;
            width: 60%;
            height: 950px;
             /* background-color: antiquewhite; */
        }
        #main-footer
        {
            width: 100%;
            clear:both;/*清除左右浮动*/
            margin-top:20px;
            position:relative;/*避免底部留白*/
            height: auto;
        }
        body
        {
            background-image: url(back.png);
        }
        #topnav{
            width: 100%;
            overflow: hidden;
            background-color: white;
            border: 1px solid black;
            border-radius: 10px;
            opacity: 0.4;
            text-align: center;
        }
        #footer{
                width: 100%;
                overflow: hidden;
            border-radius: 10px;
            text-align: center; 
        }
        a{
            font-size: 40px;
            color: black;
            text-decoration: none;
        }
        .afooter
        {
            font-size: 30px;
            color:teal  ;
            font-weight: bold;
            text-decoration: none;
        }   
        h1{
            font-size: 60px;    
            text-align: center;
        }
        ul{
            background-color: white;
            padding-left: 70px;
            opacity: 0.4;
            text-align: left;
            font-size:40px ;
            text-shadow: 0px 3px 5px rgba(9, 21, 61, 0.5);
            list-style-type: none;
            border: 1px solid white;
            border-radius: 10px;
        }
        .a-left{
            font-size: 35px ;   
            
        }
        #photo{
            height: 50px;
            width: 50px;
        }
        #photo1{
            height: 300px;
            width: 300px;
            opacity: 0.9;
            border-radius: 20px;
        }
        .li-k{
            font-size: 30px;
            text-align: center;
        }
        .left-ul
        {
            background-color: white;
            padding-left: 70px;
            opacity: 0.4;
            font-size:40px ;
            width: auto;
            text-shadow: 0px 3px 5px rgba(9, 21, 61, 0.5);
            list-style-type: none;
            border: 1px solid white;
            border-radius: 10px;
        }
        .left-ul1
        {
            background-color: white;
            padding-left: 70px;
            opacity: 0.4;
            font-size:30px ;
            width: auto;
            text-shadow: 0px 3px 5px rgba(9, 21, 61, 0.5);
            list-style-type: none;
            border: 1px solid white;
            border-radius: 10px;
        }
        textarea{
            opacity: 0.4;
        }
             
      </style>
</head>

<body>
    <div id="main-top">
        <h1>欢迎你,O_O似曾相识</h1>
        <div id="topnav">
      <a href="Four(1).html">&nbsp;&nbsp;&nbsp;&nbsp;博客园&nbsp;&nbsp;&nbsp;&nbsp;</a>
      <a href="https://www.cnblogs.com/jyt604743080/p/15468200.html">&nbsp;&nbsp;&nbsp;&nbsp;首页&nbsp;&nbsp;&nbsp;&nbsp;</a>
      <a href="https://www.cnblogs.com/jyt604743080/p/15536266.html">&nbsp;&nbsp;&nbsp;&nbsp;新随笔&nbsp;&nbsp;&nbsp;&nbsp;</a>
      <a href="">&nbsp;&nbsp;&nbsp;&nbsp;联系&nbsp;&nbsp;&nbsp;&nbsp;</a>
      <a href="Four(3).html" target="mainframe">&nbsp;&nbsp;&nbsp;&nbsp;介绍&nbsp;&nbsp;&nbsp;&nbsp;</a>
      <a href="https://www.cnblogs.com/jyt604743080/p/15536266.html">&nbsp;&nbsp;&nbsp;&nbsp;管理&nbsp;&nbsp;&nbsp;&nbsp;</a>
      </div>
    </div>
     <div id="main-left">

              <ul>
                  <li>&nbsp;</li>
                  <li>&nbsp;</li>
                  <li><img  id="photo" src="assets\images\php\image\皮卡丘.png"><a class="a-left" href="https://www.cnblogs.com/jyt604743080/p/15969981.html">闪存</a><img  id="photo" src="assets\images\php\image\皮卡丘.png"></li>
                  <li>&nbsp;</li>
                  <li><img  id="photo" src="assets\images\php\image\皮卡丘1.png"><a class="a-left" href="https://www.cnblogs.com/jyt604743080/p/15969981.html">博客</a><img  id="photo" src="assets\images\php\image\皮卡丘1.png"></li> 
                  <li>&nbsp;</li>
                  <li><img  id="photo" src="assets\images\php\image\皮卡丘2.png"><a class="a-left" href="https://www.cnblogs.com/jyt604743080/p/15969981.html">小组</a><img  id="photo" src="assets\images\php\image\皮卡丘2.png"></li>
                  <li>&nbsp;</li>
                  <li><img  id="photo" src="assets\images\php\image\皮卡丘3.png"><a class="a-left" href="https://www.cnblogs.com/jyt604743080/p/15969981.html">新闻</a><img  id="photo" src="assets\images\php\image\皮卡丘3.png"></li>
                  <li>&nbsp;</li>
                  <li><img  id="photo" src="assets\images\php\image\皮卡丘1.png"><a class="a-left" href="https://www.cnblogs.com/jyt604743080/p/15969981.html">博问</a><img  id="photo" src="assets\images\php\image\皮卡丘1.png"></li>
                  <li>&nbsp;</li>
                  <li><img  id="photo" src="assets\images\php\image\皮卡丘4.png"><a class="a-left" href="https://www.cnblogs.com/jyt604743080/p/15970013.html">收藏</a><img  id="photo" src="assets\images\php\image\皮卡丘4.png"></li>
                  <li>&nbsp;</li>
                  <li><img  id="photo" src="assets\images\php\image\皮卡丘.png"><a class="a-left" href="https://www.cnblogs.com/jyt604743080/p/15970013.html">文库</a><img  id="photo" src="assets\images\php\image\皮卡丘.png"></li>
                    <li>&nbsp;</li>
                    <li>&nbsp;</li>
                </ul>

     </div>
     <div id="main-middle">
            <iframe name="mainframe" src="Four(2).html" frameborder="0"width="1500"height="920" ></iframe>
     </div>
      <div id="main-right">
          <br>
          <br>
          <br>
            <div  class="left-ul">
               <li class="li-k">公告</li>
               <li class="li-k"> <a href="https://www.cnblogs.com/jyt604743080/">昵称: O_O似曾相识</a></li>
               <li class="li-k"> <a href="https://www.cnblogs.com/jyt604743080/p/15969981.html"></a>园龄: 8个月</li>
                 <li class="li-k"><a href="https://www.cnblogs.com/jyt604743080/p/15969981.html"></a>粉丝: 5</li>
               <li class="li-k"> <a href="https://www.cnblogs.com/jyt604743080/p/15969981.html"></a>关注: 6</li>
             </div> 
          <br>
             <div>
            <div  class="left-ul1">
                <li class="li-k">阅读排行榜</li>
                <li > <a class="li-k" href="https://www.cnblogs.com/jyt604743080/p/15468200.html">1. 数据库的增删改查(122)</a></li>
                <li > <a class="li-k" href="https://www.cnblogs.com/jyt604743080/p/15969981.html"> 2. 河北省重大技术需求征集系统原型(106)</a></li>
                <li ><a class="li-k" href="https://www.cnblogs.com/jyt604743080/p/15531228.html"> 3. 阿里编程规范(94)</a></li>
                <li> <a class="li-k"href="https://www.cnblogs.com/jyt604743080/p/15536266.html">  4. 图书管理系统(关于数据库的增删改查)(81)</a></li>
                <li > <a class="li-k"href="https://www.cnblogs.com/jyt604743080/p/15768920.html">  5. IDEA 配置安卓(Android)开发环境(70)</a></li>
              </div>  
          </div>
             <br>
             <br>
             <h1 style="color: aliceblue; opacity: 0.5;">
                 记得留言那:
             </h1>
        <div>
         <textarea name="" id="" cols="70" rows="10"></textarea>
         </div>
        </div>
     
        </div>
       <div id="main-footer">
        <div id="footer">
                <a href="https://www.cnblogs.com/jyt604743080/p/15468200.html" class="afooter">&nbsp;&nbsp;&nbsp;关于我们&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                <a href="https://www.cnblogs.com/jyt604743080/p/15966422.html" class="afooter">&nbsp;&nbsp;&nbsp;联系我们&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                <a href="https://www.cnblogs.com/jyt604743080/p/15966422.html" class="afooter">&nbsp;&nbsp;&nbsp;使用条款&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                <a href="https://www.cnblogs.com/jyt604743080/p/15966422.html" class="afooter">&nbsp;&nbsp;&nbsp;意见反馈&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
            </div>
       </div>
</body>
</html>

Four(2).html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
               .item{
           border-bottom:dashed 1px #ccc;
           padding-bottom:10px;
           margin-top:14px;
        }
    
        .item_content{
           padding-left:10px;
           margin:0;
        }

        .item_content h1{
            font-size:25px;
            color:teal;
            margin:0;
        }
        .item_descri{
            font-size:25px;
            color:gray;
            margin:0;
            margin-top:20px;
            border-left:solid 1px #ccc;
            padding-left:10px;
        }
        .item_info{
            font-size:25px;
            color:#999;
            font-style:italic;
            margin:0;
        }
    </style>
</head>
<body>
    <div class="item">
        &nbsp;
     </div>
         <div class="item">
             <div class="item_content">
                 <h1>标题一</h1>
                 <p class="item_descri">标题下面的内容</p>
                 <p class="item_info">post 2020-05-08 江银涛~阅读(999999)评论(1)编辑</p>
             </div>
         </div>
         
         <div class="item">
             <div class="item_content">
                 <h1>标题二</h1>
                 <p class="item_descri">标题下面的内容</p>
                 <p class="item_info">post 2020-05-08 江银涛~阅读(2000)评论(2)编辑</p>
             </div>
         </div>
         
         <div class="item">
             <div class="item_content">
                 <h1>标题三</h1>
                 <p class="item_descri">标题下面的内容</p>
                 <p class="item_info">post 2020-05-08 江银涛~阅读(3)评论(3)编辑</p>
             </div>
         </div>
         
         <div class="item">
             <div class="item_content">
                 <h1>标题四</h1>
                 <p class="item_descri">标题下面的内容</p>
                 <p class="item_info">post 2020-05-08 江银涛~阅读(4)评论(4)编辑</p>
             </div>
         </div>
         
         <div class="item">
             <div class="item_content">
                 <h1>标题五</h1>
                 <p class="item_descri">标题下面的内容</p>
                 <p class="item_info">post 2020-05-08 江银涛~阅读(5)评论(5)编辑</p>
             </div>
         </div>
         
         <div class="item">
             <div class="item_content">
                 <h1>标题六</h1>
                 <p class="item_descri">标题下面的内容</p>
                 <p class="item_info">post 2020-05-08 江银涛~阅读(6)评论(6)编辑</p>
             </div>
         </div>
</body>
</html>

Four(3).html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<SCRIPT LANGUAGE="JavaScript">
        var strTime, strDate;
        function webClock()
        {
            var dNow = new Date();
            var dHours = dNow.getHours();
            var dMinutes = dNow.getMinutes();
            var dSeconds = dNow.getSeconds();
            strTime = dHours;
            strTime += ((dMinutes<10) ? ":0" : ":") + dMinutes;
            strTime += ((dSeconds<10) ? ":0" : ":") + dSeconds;
            clock.time.value = strTime;
            
            var dDate = dNow.getDate();
            var dMonth = dNow.getMonth() + 1;
            var dYear = dNow.getYear();
            strDate = dMonth;
            strDate += ((dDate<10) ? "/0" : "/") + dDate;
            strDate += "/" + dYear;
            clock.date.value = strDate;
            setTimeout("webClock()",1000);
        }
    </SCRIPT>
    <style type="text/css">
        body{
            width:"1500px";
            height: "920px";
        }
        th
        {
            font-size: 30px;
        }
        h1{
            font-size:40px ;
        }
    </style>
</head>    
</HTML>
<body ONLOAD="webClock()">
    <h1 class="callout" align="center">博客游览访问记录</h1>
<form action="zhengji1" method="post" align="center"  style="width:1400px;height: 820px;">
        <table class="wzc-table" border="1" cellspacing="0"style="width: 1400px;height: 780px; background-color:white;opacity: 0.5;"    >
             <tr>
                <th>访问人员:</th>
                <td><input type="text"  name="mingcheng" size="20" style="width:700px;height: 40px;"></td>
            </tr>
            <tr>
                <th>直接阐述:</th>
            <td colspan="3">
             <textarea cols="100" rows="5"name="gaishu"></textarea>
        </td>
            </tr>
            <tr>
            <th>喜欢风格:</th>
                <td>
                <input type="checkbox" name="leixing" value="基础研究 ">1
                <input type="checkbox" name="leixing" value="应用研究">2
                <input type="checkbox" name="leixing" value="试验发展">3
                <input type="checkbox" name="leixing" value="研究发展与成果应用">4 
                <input type="checkbox" name="leixing" value="技术推广与科技服务  ">5务 
           </td>
            </tr>
            
            <tr >
            <td></td>
                <td ><input type="submit" value="提交" class="wzc-btn" style="width: 200px; height: 50px;"></td>
            </tr> 
            
        </table>
    </form>
</body>
</html>

CSS代码也可以单另放在其他文件中。

分享到:
首页桂ICP备2022000863号分类地图学习工具教育专题当前时间:本站内容只用于学习和交流,如有牵扯版权问题请联系站长邮箱: