欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

CSS/HTML简单静态页面

程序员文章站 2022-06-25 11:23:58
****使用CSS/HTML创建一个简单的页面****效果图页面效果,尺寸为题分为两张图学习了CSS以及HTML基础知识使用的是一些很基础的知识,画出了框架。有一些简单的页面功能: 连接的hover效果 ,设置锚点。CSS样式文件夹名称为styl.css,下载以后应当注意引入CSS文件的文件名称。初学基础知识,为练习,甚是简陋,待日后完善。**HTML代码**
                           ****使用CSS/HTML创建一个简单的页面****

效果图

页面效果,尺寸为题分为两张图
学习了CSS以及HTML基础知识使用的是一些很基础的知识,画出了框架。
有一些简单的页面功能: 连接的hover效果 ,设置锚点。
CSS样式文件夹名称为styl.css,下载以后应当注意引入CSS文件的文件名称。
初学基础知识,为练习,甚是简陋,待日后完善。
CSS/HTML简单静态页面
CSS/HTML简单静态页面

**

HTML代码

**

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <link rel="stylesheet" href="style.css">
     
</head>

<body>
    <div id="top" class="w header">
         <!-- 头部开始--------------------------------------- -->
       <div class="logo"><img src="imgs/logo.jpg" alt=""></div>
       <div class="nav">
           <ul>
               <li> <a href="#">导航栏</a></li>
               <li><a href="#" >jojo故事起源</a></li>
               <li><a href="#">剧情发展</a></li>
           </ul>
       </div>

       <div class="search">
           <input type="text" value="输入关键字">
           <button><img src="imgs/search_button.png" alt="cao"></button>
       </div> 

       <div class="id">
           <a href="#">ID:JOJOJOJOJOJO</a>
       </div>

       </div>
       <!-- 头部结束----------------------------- -->

       <!-- 中间部分开始------------------- -->
      <div class="banner">
           <div class="w center">
             <!-- 左边部分 -->
             <div class="left">
                 <ul>
                   <li><a href="#jojo1">jojo1:幻影之血<span>></span></a></li>
                   <li><a href="#jojo2">jojo2:战斗潮流<span>></span></a></li>
                   <li><a href="#jojo3">jojo3:星尘斗士<span>></span></a></li>
                   <li><a href="#jojo4">jojo4:不灭钻石<span>></span></a></li>
                   <li><a href="#jojo5">jojo5:黄金之风<span>></span></a></li>
                 </ul>
             </div>
             <!-- 右边部分 -->
            <div class="right">
           <h1>剧&nbsp&nbsp集</h1>
           <div class="p">
           <ul>
            <li><a href="#">P1>黄金体验(Gold Experience)</a></li> <hr>
            <li><a href="#">P2>布加拉提到来</a></li> <hr>
            <li><a href="#">P3>前往会见*中的黑帮</a></li><hr>
            <li><a href="#">P4>黑帮入门</a></li><hr>
            <li><a href="#">P5>目标是波尔波的遗产!</a></li>
          </ul>
           </div>
             </div>
           </div>
           <!-- 中间部分结束------------- -->
         
<!-- 底部开始------- ------------------------------>          

<!-- jojo1详情----------------------------------- -->
          <div id="jojo1" class="one w" >
           <div>
            <h2 class="title">幻影之血</h2>
           </div>
          </div>
 <!-- jojo2详情 --------------------------------->            
           <div id="jojo2"  class="two w">
              <div>
               <h2 class="title">战斗潮流</h2>

              </div>
          </div> 
<!-- jojo3详情----<a href="#top">返回顶部    @shihao</a>-------------------------------->
          <div id="jojo3" class="three w">
            <div>
               <h2 class="title">星尘斗士</h2>
              </div>
 <!-- jojo4详情 ------------------------------------------->             
          </div>
           <div id="jojo4" class="four w">
            <div>
              <h2 class="title">不灭钻石</h2>
             </div>
          </div>
<!-- jojo5详情 ----------------------------------------->
          <div id="jojo5" class="five w">
            <div>
              <h2 class="title">黄金之风</h2>
             </div>
          </div>
  <!-- 底部信息部分-------------------- -->        
          <div class="end">
           <pre> <a href="#top">返回顶部 </a> 版权所有: copyright@shihao   咨询投诉电话:17852035928</pre>
          
          </div>
      </div>
</body>
</html>

**

CSS部分代码

**

* {
    margin:0;
    padding: 0;
}
 .w {
     width: 1200px;
     margin: auto;
}

 a {
     text-decoration: none;
 }
 body {
     background-color: rgb(238, 241, 241);
 }
   li {
       list-style: none;
   }
   /* header部分开始--------------------------------- */
  .header{
      height:40px;
      margin:30px auto;
      text-align:center;
      font-size: 10px;

  }
  
  .logo {
      float: left;
      width: 128px;
      height: 40px;

  }
  .logo img {
      margin-top: 7px;
  }
  .nav li {
      float: left;
      height: 20px;
      margin-left: 5px;
      padding: 10px;
      padding-left: 30px;
  }
  .nav li:hover {
      background-color:pink;
  }
  .nav ul li a{ 
      float: left;
      text-decoration: none;
      font-size: 20px;

      
      
  }
  .nav ul li a:hover{
      border-bottom: 2px solid black;
  }
   .search {
       float: left;
       width: 412 ;
       height: 40px;
       background-color:wheat;
       margin-left: 20px;
   }
   .search input {
       float: left;
       width: 360px;
       height: 38px;
       border: 1px solid skyblue;
       padding-left: 5px;
   }
   .search button {
       float: left;
       width: 40px;
       height: 40px;
       /* button有边框,要去掉 */
       overflow:hidden;
       border: 1px solid skyblue;

   }
    .id {
        float: left;
        height: 20px;
        overflow: hidden;
         padding: 10px;
        margin-left: 50px;
        font-size: 20px;
        border-radius: 5px;
   
        
    }
.id a {
    text-decoration: none;
    font-size: 20px;
    padding: 10px 0;
}
 .id a:hover {
     background-color: pink;
     
 }

 /* banner部分开始------------------------------------------------- */
  .banner{
      height: 421px;
      background-color: rgb(114, 92, 238);
      background-image: url(imgs/cbgd.jpg);

  }
.center{
    background-color: silver;
}

.center{
    height: 420px;
    background-color: snow;
    background-image: url(imgs/jojo.jpg);
    
}
.left {
    float: left;
    width: 220px;
    height: 420px;
    background-color: rgba(38, 33, 105, 0.774);

}
.left ul li a{
 font-size: 20px;
 text-decoration: none ;
 padding-left: 10px;
 color: rgb(238, 242, 245);
 

}
.left ul li{
   width: 200px;
   height: 40px;
   padding-top: 44px;
}
.left ul li a:hover {
   color: rgb(51, 5, 104);
}
.left ul li a span {
    float: right;
    /* padding-right: 10px; */
}
/* 右边部分开始--------- */
.right {
     float:right;
     width: 230px;
     height: 300px;
     background-color: rgb(255, 235, 205);
     margin-top: 100px;
}
.right h1 {
    height: 45px;
   background-color: rgb(243, 43, 43);
   text-align: center;

}
.p ul li {
    border: 5px;
    padding: 12px;
    font-size: 15px;  

}
.p ul li:hover{
    background-color: rgb(156, 199, 224);
}

 /* 分剧集介绍部分开始 */
.one {
    height: 300px;
    background-color: yellow;
} 
.two {
    height: 300px;
    background-color: rgb(0, 4, 255);
} 
.three {
    height: 300px;
    background-color: rgb(233, 115, 19);
} 
.four {
    height: 300px;
    background-color: rgb(26, 195, 224);
} 
.five {
    height: 300px;
    background-color: rgb(87, 23, 87);
}

 .title {
     float: left;
    font-size: 35px;
    padding: 20px;
 }

/* 底部----------------------- */
.end {
    text-align: center;
    height: 30px;
    background-color: rgb(10, 22, 61);
    
}
.end pre {
    color: rgb(85, 87, 241);
    font-size: 20px;
}
.end a {
    color: wheat;
    font-size: 20px;
}

本文地址:https://blog.csdn.net/weixin_43865846/article/details/109564201