HTML5之HTML+CSS3代码（二）

最新推荐文章于 2021-11-01 19:56:09 发布
最新推荐文章于 2021-11-01 19:56:09 发布
阅读量846 收藏 2
点赞数
分类专栏： HTML5专栏 文章标签： html5 css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wzc10101415/article/details/64927649
版权

一、CSS的属性补充
index

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        input{
            width: 250px;
            height: 30px;
            padding: 5px;

            box-sizing: border-box;
        }

       .test1{
           background-color: blue;
           width: 200px;
           height: 50px;
           /*设置过渡动画效果*/
           -webkit-transition:height 2s ease;
       }

       .test1:hover{
           height: 500px;
       }
    </style>
</head>
<body>
   <input>

   <div class="test1"></div>
</body>
</html>

01-float布局

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            background-color: red;
            width: 500px;
            height: 250px;
        }
        span{
            background-color: blue;
        }

        .test1{
            /*脱离标准流*/
            float: right;
        }

        .test2{
            float: left;
        }

    </style>
</head>
<body>
   <div>
       <span class="test2">111111</span>
       <span class="test1">222222</span>
       <span class="test3">33333</span>
       <span>44444</span>
   </div>
</body>
</html>

02-position属性

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            padding: 0px;
            margin: 0px;
        }

        div{
            position: relative;
            background-color: red;
            width: 250px;
            height: 250px;
            margin: 100px;
        }

        span{
            background-color: green;

            position: absolute;
            top:20px;
            left: 20px;
        }
    </style>
</head>
<body>
    <div>
        <span>我是span</span>
    </div>
</body>
</html>

二、高仿百度首页
index.css

body{
    padding: 0px;
    margin: 0px;
    font-family: 'sans-serif';
    font-size: 13px;
}

a{
    color: black;
}

/*  设置头部  */
#header{
   text-align:right;
   margin:15px 0;
}

#header a{
    margin-right: 10px;
    font-weight: bolder;
    font-size: 15px;
}

#header a.no-weight{
    font-weight: normal;
}

#header a.more-product{
    display: inline-block;
    background-color: #3385ff;
    color: white;
    text-align: center;
    text-decoration: none;
    width: 70px;
    height: 25px;
    line-height: 25px;
}

/*  设置中间部分  */
#main-top .logo-image{
    text-align: center;
}

#main-top .logo-image img{
    width: 270px;
    height: 129px;
    margin-bottom: 10px;
}

#main-top .search{
    width: 600px;
    height: 35px;
    margin: 0 auto;
}

#main-top .search input{
    width: 500px;
    height: 35px;
    padding: 5px;
    box-sizing: border-box;
    outline: none;
    border: 1px solid #ddd;
    border-right-color: white;
    float: left;
}

#main-top .search a{
    display: inline-block;
    background-color: #3385ff;
    color: white;
    text-align: center;
    text-decoration: none;
    width: 100px;
    height: 35px;
    line-height: 35px;
    float: left;
}

#main-top .search input:focus{
    border: 1px solid #3385ff;
}

#main-bottom{
    margin-top: 30px;
    text-align: center;
}

#main-bottom .main-bottom-image img{
   width: 110px;
   height: 110px;
   margin: 7px 5px;
   box-shadow: 1px 1px 1px #ddd;
   border-radius: 3px;
}

#main-bottom .main-bottom-image img:hover{
    opacity: 0.6;
    box-shadow: 1px 1px 2px #ddd;
}

/*  底部   */
#footer{
   text-align: center;
   margin-top: 90px;
}

#footer .footer-top a{
   color: blue;
   margin: 0 5px;
}

#footer .footer-bottom{
    color: #666;
}

#footer .footer-bottom a{
    color: #666;
}

index.js

/**
 * Created by apple on 15/10/27.
 */
function $(id){
  return typeof id === 'string' ? document.getElementById(id) : id;
}

window.onload = function(){
   var changeStyle = $('footer').getElementsByClassName('changeStyle')[0];
   console.log(changeStyle);
   changeStyle.onclick = function(){
      // 改变背景颜色
      var body = document.getElementsByTagName('body')[0];
      body.background = 'images/bg.jpg';
      body.style.backgroundSize = 'cover';
      // 改变图片的logo
      $('logo').src = 'images/logo_white_ee663702.png';
      // 改变导航条
      $('header').style.backgroundColor = 'rgba(0,0,0,0.2)';
      $('header').style.marginTop = '0px';
      $('header').style.height = '40px';
      $('header').style.lineHeight = '40px';
      var aArr = $('header').getElementsByTagName('a');
      for(var i in aArr){
          aArr[i].style.color = 'white';
      }
   };
}

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>百度一下,你就知道</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!--头部-->
    <div id="header">
        <a href="#">新闻</a>
        <a href="#">hao123</a>
        <a href="#">地图</a>
        <a href="#">视频</a>
        <a href="#">贴吧</a>
        <a href="#" class="no-weight">登录</a>
        <a href="#" class="no-weight">设置</a>
        <a href="#" class="more-product">更多产品</a>
    </div>
    <!--中间上半部分-->
    <div id="main-top">
       <div class="logo-image">
          <img id="logo" src="images/bd_logo.png" alt="百度logo">
       </div>
       <div class="search">
          <input value="">
          <a href="#">百度一下</a>
       </div>
    </div>
    <!--中间下半部分-->
    <div id="main-bottom">
        <div class="main-bottom-image">
           <img src="images/d_1.png">
           <img src="images/d_2.png">
           <img src="images/d_3.png">
           <img src="images/d_4.png">
        </div>
        <div class="main-bottom-image">
            <img src="images/d_5.png">
            <img src="images/d_6.png">
            <img src="images/d_7.png">
            <img src="images/d_8.png">
        </div>
    </div>
    <!--尾部-->
    <div id="footer">
        <p class="footer-top">
            <a href="#">把百度设为主页</a>
            <a href="javascript:void(0);" class="changeStyle">关于百度</a>
            <a href="#">About  Baidu</a>
        </p>
        <p class="footer-bottom">
        ©2015 Baidu <a href="#">使用百度前必读</a> 意见反馈 京ICP证030173号
        <img src="images/copy_rignt_24.png" alt="版权图片">
        </p>
    </div>

    <script type="text/javascript" src="js/index.js"></script>
</body>
</html>

三、登录界面
index.css

a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var{
    padding: 0;
    margin: 0;
}

body{
    background-color: #F2F2F2;
    font-family: 'sans-serif';
    font-size: 13px;
}

a{
    color: grey;
    text-decoration: none;
}

/*面板*/
#panel{
   width: 260px;
   margin: 100px auto 0;
   background-color: white;
   padding: 40px;
   border: 1px solid #ddd;
   border-radius: 6px;
   box-shadow: 0 0 1px #ddd;

}

/*面板的顶部*/
#panel .panel-top{
  margin-bottom: 20px;
}

#panel .panel-top h2{
    font-size: 20px;
    text-align: center;
    padding: 15px 0;
    border-bottom: 1px solid #ddd;
    font-weight: normal;
}

/*面板的中部*/
#panel .panel-content{

}

#panel .panel-content .int{
  height: 40px;
  position: relative;
  margin-bottom: 15px;
}

#panel .panel-content .int label{
  position: absolute;
  top: 6px;
  left: 7px;

}

#panel .panel-content .int input{
  height: 40px;
  width: 260px;
  padding-left: 38px;
  box-sizing: border-box;
  border: 1px solid #dddddd;
  border-radius: 6px;
  font-size: 14px;
}

#panel .panel-content .int input:focus{
    outline: none;
    border-color: #ff5a00;
    box-shadow: 0 0 2px #ff5a00;
}

#panel .panel-content .setting{
    margin-bottom: 20px;
}
#panel .panel-content .setting .forget-pwd{
    float: right;
}

#panel .panel-content button{
    width: 260px;
    height: 36px;
    background-color: #ff5a00;
    border: 0;
    border-radius: 4px;
    font-size: 17px;
    color: white;
    margin-bottom: 15px;
}

#panel .panel-content button:focus{
    outline: none;
}

#panel .panel-content .reg{
   color: grey;
   text-align: center;
   padding-bottom: 15px;
   border-bottom: 1px solid #ddd;
}

#panel .panel-content .reg a{
    color: #ff5a00;
    margin-left: 3px;
}


/*面板的底部*/
#panel .panel-footer{
    margin-top: 10px;
    height: 35px;
}

#panel .panel-footer span{
    display: inline-block;
    font-size: 16px;
    font-weight: bolder;
    height: 28px;
    line-height: 28px;
}

#panel .panel-footer img{
  width: 30px;
  vertical-align: middle;
}

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>欢迎登录神5教育系统</title>
    <link href="css/index.css" rel="stylesheet">
</head>
<body>
   <!--面板-->
   <div id="panel">
       <!--面板的头部-->
       <div class="panel-top">
           <h2>欢迎登录神5教育系统</h2>
       </div>
       <!--面板的中部-->
       <div class="panel-content">
           <!--输入框-->
           <div class="int">
               <label><img src="images/icon_people.png" width="28" height="25"></label>
               <input value="" placeholder="您的手机号/用户名" type="text">
           </div>
           <div class="int">
               <label><img src="images/icon_password.png" width="28" height="25"></label>
               <input value="" placeholder="输入密码" type="password">
           </div>
           <!--配置信息-->
           <div class="setting">
              <a href="javascript:void(0)"><input type="checkbox"> 下次自动登录</a>
              <a href="javascript:void(0)" class="forget-pwd">忘记密码?</a>
           </div>
           <!--登录-->
           <button>登录</button>
           <!--注册-->
           <p class="reg">还没账号?<a href="javascript:void(0)">马上注册</a></p>
       </div>
       <!--面板的底部-->
       <div class="panel-footer">
           <span>社交账号登录: </span>
           <img src="images/sina.png">
           <img src="images/weixin.png">
           <img src="images/qq.png">
       </div>
   </div>
</body>
</html>

这里写图片描述

四、宠物网
这里写图片描述
index.css

/*导入字体*/
@font-face {
    font-family: 'BebasNeue-webfont';
    src: url(../fonts/BebasNeue-webfont.ttf);
}

a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var{
    padding: 0;
    margin: 0;
}

a{
    text-decoration: none;
}

body{
    background: url("../images/pattern.gif");
    font-family: 'BebasNeue-webfont';
}

/*头部*/
#header{
    background-color: red;
    height: 3px;
}

/*导航*/
#nav{
    text-align: center;
}

#nav ul{
    display: inline-block;
}

#nav ul li{
    display: inline-block;
}

#nav ul li a.selected{
    background-color: white;
    color: black;
}

#nav ul li a{
    display: inline-block;
    margin-left: 10px;
    color: white;
    width: 200px;
    height: 50px;
    line-height: 50px;
    font-size: 30px;
}

#nav ul li a:hover{
    background-color: white;
    color: black;
}

/*列表*/
#list{
    margin-top: 90px;
    background-color: white;
    text-align: center;
}

#list .dom{
    display: inline-block;
    width: 382px;
    padding: 20px;
    text-align: left;
}

#list p{
    font-family: 'arial';
    text-indent: 7%;
    margin: 5px 0;
}

#list a{
    display: inline-block;
    color: white;
    background-color: #C0392B;
    width: 120px;
    height: 35px;
    font-size: 25px;
    text-align: center;
    line-height: 35px;
}

#list a:hover{
    background-color: black;
}

/*尾部*/
#footer{
    margin: 10px 0;
    text-align: center;
}

#footer h2{
    color: white;
    margin-bottom: 10px;
}

#footer ul{
    display: inline-block;
    margin: 0 auto;
    list-style: none;
}

#footer ul li{
    float: left;
    margin: 0 5px;
}

/*响应式设计*/
@media screen and (max-width: 1099px){
    #nav ul li a{
        width: 150px;
        font-size: 28px;
    }
}

@media screen and (max-width: 828px){
    #nav ul li a{
        width: 120px;
        font-size: 25px;
    }
}


@media screen and (max-width: 692px){
    #nav ul li a{
        width: 80px;
        font-size: 20px;
    }

    #list{
        margin-top: 50px;
    }
}

@media screen and (max-width: 515px){
    #nav ul li a{
        width: 50px;
        font-size: 15px;
        height: 30px;
        line-height: 30px;
    }

    #list{
        margin-top: 30px;
    }
}

@media screen and (max-width: 400px){
    #list .dom{
        width: 352px;
    }

    #list .dom img{
        width: 352px;
    }
}

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>宠物网</title>
    <link href="css/index.css" rel="stylesheet">
</head>
<body>
    <!--头部-->
   <div id="header"></div>
   <!--导航-->
   <div id="nav">
       <ul>
           <li><a href="#" class="selected">home</a></li>
           <li><a href="#">about us</a></li>
           <li><a href="#">services</a></li>
           <li><a href="#">gallery</a></li>
           <li><a href="#">contact</a></li>
       </ul>
   </div>
   <!--列表-->
   <div id="list">
      <div class="dom">
          <img src="images/pic.jpg">
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
          <a href="#">read more</a>
      </div>
       <div class="dom">
           <img src="images/pic1.jpg">
           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
           <a href="#">read more</a>
       </div>
       <div class="dom">
           <img src="images/pic2.jpg">
           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
           <a href="#">read more</a>
       </div>
       <div class="dom">
           <img src="images/pic2.jpg">
           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
           <a href="#">read more</a>
       </div>
       <div class="dom">
           <img src="images/pic1.jpg">
           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
           <a href="#">read more</a>
       </div>
       <div class="dom">
           <img src="images/pic.jpg">
           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
           <a href="#">read more</a>
       </div>
       <div class="dom">
           <img src="images/pic2.jpg">
           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
           <a href="#">read more</a>
       </div>
       <div class="dom">
           <img src="images/pic1.jpg">
           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
           <a href="#">read more</a>
       </div>
       <div class="dom">
           <img src="images/pic.jpg">
           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
           <a href="#">read more</a>
       </div>
       <div class="dom">
           <img src="images/pic2.jpg">
           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
           <a href="#">read more</a>
       </div>
       <div class="dom">
           <img src="images/pic1.jpg">
           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
           <a href="#">read more</a>
       </div>
       <div class="dom">
           <img src="images/pic.jpg">
           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</p>
           <a href="#">read more</a>
       </div>
   </div>
   <!--尾部-->
   <div id="footer">
       <h2>contact us</h2>
       <ul>
           <li><a><img src="images/fb.png"></a></li>
           <li><a><img src="images/tw.png"></a></li>
           <li><a><img src="images/g+.png"></a></li>
           <li><a><img src="images/rss.png"></a></li>
       </ul>
   </div>
</body>
</html>

这里写图片描述

五、初识bootStrap
这里写图片描述

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>认识bootStrap</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <style>
        body{
            margin: 100px;
        }
    </style>
</head>
<body>
<!--按钮-->
<button class="btn btn-danger" style="width: 200px;">我是按钮</button>
<button class="btn btn-success">我是按钮</button>
<button class="btn btn-warning">我是按钮</button>

<!--面板-->
<div class="panel panel-success">
    <div class="panel panel-heading">不好了,出大事了!</div>
    <div class="panel panel-body">我不小心摔倒了!!!</div>
</div>

<!--徽章-->
<i class="badge" style="background-color: red">4</i>
<i class="badge" style="background-color: red">你有新的信息</i>

<!--其他-->
<div class="progress">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
        <span class="sr-only">45% Complete</span>
    </div>
</div>

<div class="progress">
    <div class="progress-bar progress-bar-success" style="width: 35%">
        <span class="sr-only">35% Complete (success)</span>
    </div>
    <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
        <span class="sr-only">20% Complete (warning)</span>
    </div>
    <div class="progress-bar progress-bar-danger" style="width: 10%">
        <span class="sr-only">10% Complete (danger)</span>
    </div>
</div>

<!--字体-->
<p></p>
<span class="glyphicon glyphicon-signal" style="font-size: 250px; color: orangered;"></span>
<span class="glyphicon glyphicon-music"></span>
<span class="glyphicon glyphicon-search"></span>
</body>
</html>

这里写图片描述
六、高仿Mac桌面
这里写图片描述
index.css

a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var{
    padding: 0;
    margin: 0;
}

ul{
    list-style: none;
}

a{
    list-style: none;
    color: #000000;
}

a:hover, a:visited, a:link{
    color: #000000;
    text-decoration: none;
}

body{
    background: url("../images/apple.jpg");
    background-size: cover;
}

/*头部*/
#header{
    background-color: rgba(241,241,241,0.8);
    height: 36px;
    line-height: 36px;
    box-shadow: 0 1px 10px black;
    font-size: 18px;
}

#header .header-left li{
    float: left;
    margin-left: 15px;
}

#header .header-left li a:hover{
    background-color: blue;
    color: #ffffff;
}

#header .header-left .dropdown-menu{
   margin-top: -1px;
   border-top-left-radius: 0px;
   border-top-right-radius: 0px;
   background-color: rgba(241,241,241,0.8);
}

#header .header-right{
    float: right;
}

#header .header-right li{
   margin-right: 10px;
}

/*中间*/
#main .file{
    width: 100px;
    text-align: center;
    margin: 20px;
}

#main .file img{
    width: 70px;
}

#main .file p{
    color: #ffffff;
}

/*底部*/
#footer{
    height: 60px;
    line-height: 60px;
    /*相对浏览器进行绝对定位*/
    position: fixed;
    bottom: 0px;
    width: 100%;
}

#footer .dock{
    background:url("../images/dock_bg.png");
    height: 100%;
    width: 60%;
    margin: 0 auto;
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    /*设置不透明度*/
    opacity: 0.9;
    text-align: center;
}

#footer .dock img{
    width: 50px;
    height: auto;
}

#footer .dock ul{
    display: inline-block;
}

#footer .dock ul li{
    float: left;
    margin: 0 10px;
    /* 过渡动画的效果 */
    transition:0.25s linear;
}

#footer .dock ul li:hover{
    /* 设置动画的方向 */
    -webkit-transform-origin: bottom center;
    -moz-transform-origin: bottom center;
    -ms-transform-origin: bottom center;
    -o-transform-origin: bottom center;
    transform-origin: bottom center;
    /* 放大1.5倍 */
    transform:scale(1.5);
}

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>高仿Mac桌面</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet">
</head>
<body>
  <!--头部-->
  <div id="header">
      <ul class="header-left">
          <li><a href="#" class="glyphicon glyphicon-apple"></a></li>
          <li><a href="#">520IT</a></li>
          <li><a href="#">文件</a></li>
          <li><a href="#">编辑</a></li>
          <li><a href="#">显示</a></li>
          <li  class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">帮助</a>
              <ul class="dropdown-menu">
                  <li><a href="#">帮助什么?</a></li>
                  <li><a href="#">I need help!</a></li>
                  <li><a href="#">上网请求帮助!</a></li>
                  <li><a href="#">Help me,Thanks!</a></li>
              </ul>
          </li>
      </ul>
      <ul class="header-right">
          <li class="glyphicon glyphicon-volume-up"></li>
          <li class="glyphicon glyphicon-align-left"></li>
          <li class="glyphicon glyphicon-question-sign"></li>
          <li class="glyphicon glyphicon-leaf"></li>
      </ul>
  </div>
  <!--身体-->
  <div id="main">
      <div class="file">
          <img src="images/file.png">
          <p>大神5期视频</p>
      </div>
      <div class="file">
          <img src="images/file.png">
          <p>大神5期资料</p>
      </div>
      <div class="file">
          <img src="images/file.png">
          <p>大神5期图片</p>
      </div>
  </div>
  <!--尾部-->
  <div id="footer">
      <div class="dock">
          <ul>
              <li><a href="#"><img src="images/zurb-icon.png"></a></li>
              <li><a href="#"><img src="images/linkedin-icon.png"></a> </li>
              <li><a href="#"><img src="images/notable-icon.png"></a> </li>
              <li><a href="#"><img src="images/lastfm-icon.png"></a> </li>
              <li><a href="#"><img src="images/facebook-icon.png"></a> </li>
              <li><a href="#"><img src="images/google-icon.png"></a> </li>
              <li><a href="#"><img src="images/notable-icon.png"></a> </li>
              <li><a href="#"><img src="images/lastfm-icon.png"></a> </li>
              <li><a href="#"><img src="images/facebook-icon.png"></a> </li>
              <li><a href="#"><img src="images/google-icon.png"></a> </li>
          </ul>
      </div>
  </div>
  <script type="text/javascript" src="bootstrap/js/jquery-1.11.1.js"></script>
  <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
</body>
</html>

这里写图片描述

英雄有梦
关注
专栏目录
html5+css3源代码
04-02
基本的html5和css3的源代码实例，适合初学者学习html5和css3
HTML5+CSS3实例源码（包含20个）
02-16
HTML5+CSS3实例源码（包含20个）,制作都很精细，界面漂亮，望对你有帮助
HTML5之HTML+CSS3代码（一）
王者归来之英雄有梦
03-22 3417
一、HTML的基础语法 01-输出helloworld<!--根标签--> <html> <!--头部:配置性的信息--> <head> <meta charset="UTF-8"> <title>大神二期</title> </head> <!--身体(主要内容)--> <body> 你好,世界! </body> </html>02-HTM
HTML5+CSS3 - 代码简写篇
weixin_30819085的博客
04-17 115
有话先说：我是一只菜鸟，还是一只刚步入前端这个领域的小菜年，在不断的进阶，理解最深刻的还是代码，既爱又恨却不知如何去感悟。 background属性简写： background-position属性组合方式：[left|center|right] || [top|bottom] （组合中代码都是以空格间距） background-attachment属性设置背景图像是否...
Html5+Css3网页设计基础 第三版 源代码
11-20
HTML5与 CSS3网页设计基础 第3版 作者：Terry Felke-Morris著 源代码分享
html5+css3+JS代码
05-22
在《精通html5+css3+JavaScript页面设计》的源代码中，读者可以找到各种实例，包括使用HTML5的新元素构建结构化的页面，利用CSS3的属性设计富有视觉吸引力的界面，以及用JavaScript编写交互逻辑。这些代码可以帮助...
HTML5+CSS3 精美登陆界面源码
01-19
HTML5和CSS3是现代网页开发的两大核心技术，它们为创建功能丰富且视觉吸引人的网页提供了强大的工具。在这个“HTML5+CSS3 精美登陆界面源码”压缩包中，包含了三个精心设计的登录界面，每一个都充分利用了HTML5的新...
个人博客html+css+JavaScript完整代码
05-23
个人博客的HTML+CSS+JavaScript代码应该遵循良好的编码规范，保证代码的可读性和可维护性。同时，为了提高性能，可以进行代码压缩和合并，减少HTTP请求，并利用缓存策略。此外，考虑到搜索引擎优化（SEO），需要合理...
html+css网页设计源代码
11-07
在这个“html+css网页设计源代码”中，我们有机会深入理解这两种语言如何协同工作，创建出具有专业外观和功能的网站。 HTML是网页的基础，它定义了网页的结构和内容。在提供的"html3"文件中，我们可以看到各种HTML...
网页设计期末大作业+html+css
05-25
9个网页布局，学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生网页作业，div css js 等通过dreamwear的工具实现规范化，比如文件夹的规范，代码写作的规范，...
25个各类型网站HTML5CSS3模板源代码
08-22
25个各类型网站HTML5CSS3模板源代码打包分享，html5，以静态页面、css、js为主。25个，以供学习和参考。
HTML5+CSS3网站设计基础教程_动手实践源代码
11-09
HTML5+CSS3网站设计基础教程_动手实践源代码 chapter01 到 chapter10
Html5,css3菜单
weixin_34273479的博客
08-31 110
实现的难点在于：first-child,last-child 两个选择器，以后margin-left:-1px;的应用，33%,34%宽度的技巧处理。 另外一个难点是：box-shadow:1px 0 0 #F1F1F1 inset; 的实现。 最后是：background:-webkit-gradient(linear, left top, left bottom, from(#f9f9f9...
HTML5与CSS3经典代码
weixin_30611509的博客
05-26 241
1）全屏背景 body { background: url(../img/pic.jpg) no-repeat center center fixed; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } ...
css3网站代码 html5_html5+css3网站代码
weixin_39967996的博客
12-23 395
文章任平生782017-08-02610浏览量提高前端开发质量和效率的脚手架和工具套件 - Uix KitHello, 这次推荐一款提高前端开发质量和效率，一种流程参考和思维模式的小玩意儿——Uix Kit! 它是一个基于Bootstrap的快速建站HTML5套件，遵循W3C标准，包括手风琴、Tab切换、大型导航、单页、视差、分页、项目符号列表、文章列表、网格系统、AJAX交互、常用的多风格轮播、...
HTML5CSS3
weixin_45257157的博客
12-28 718
HTML5 第一天 一、什么是 HTML5 HTML5 的概念与定义 定义：HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，号称下一代的 HTML 两个概念： 是一个新版本的 HTML 语言，定义了新的标签、特性和属性 拥有一个强大的技术集，这些技术集是指： HTML5 、CSS3 、javascript, 这也是广义上的 HTML5 HTML5 ...
HTML + CSS3
weixin_61650602的博客
11-01 244
开发工具： 编辑器：DW（dreamweaver）,subllime, Webstorm,Hbuider , vscode 浏览器：IE（内核是Trident）、火狐（Firefox）（内核是Gecko）、谷歌（Chrome）（内核是Blink）、Safari（内核是Webkit）和Opera（内核也是Blink）等。我们平时称为五大浏览器。 浏览器内核有两部分： 渲染引擎：它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加 入CSS等）...
HTML5+CSS3实现生日蛋糕代码详解
"纯HTML5+CSS3制作生日蛋糕(代码易懂)——通过HTML5和CSS3技术，实现一个简单而生动的生日蛋糕动画效果，包括底部蛋糕、顶层蛋糕和蜡烛三个部分，利用CSS定位、旋转及阴影效果来构建蛋糕的立体感。" 在本文中，我们...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值