“数万行代码“教你用html和css编写一个精美的网页

最新推荐文章于 2024-08-01 09:59:14 发布
最新推荐文章于 2024-08-01 09:59:14 发布
阅读量1.5w 收藏 162
点赞数 90
文章标签： vue.js css javascript css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43392489/article/details/116848586
版权

我是歌谣 放弃很容易 但是坚持一定很酷

1前言

作为一名前端开发工程师 开发一个完美的网页也是我们的必修课之一 逻辑写起来有时候不是那么的难 据说页面样式才是最难的一课

本文内容纯属自己个人观点 欢迎一起交流吐槽

2网页基础版（div+css）

我第一次接触前端页面的时候做的网页就是一个div+css的布局 因为当时是在实习 网页的内容现在已经丢失 类似一个商品管理的页面 页面分出来给一个班的同学

几个人分为一个小组 进行共同开发 页面的跳转直接a标签进行跳转即可

 2.1.1桥边菇凉页面预览

桥边菇凉小页面 写这个页面当时应该是这个音乐还挺好听的 我叫歌谣 喜欢听歌也是我生活的一部分 这个页面包含了太多的岁月沉淀了   现在2021年了 这个页面就是基础的div+css布局

2.1.2桥边菇凉代码

这个页面应该不是第一个 一看这个样式就是我模仿某页面进行一个开发的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>qq音乐</title>
    <style>
    *{margin: 0;padding: 0;}
    img{display:block;}
    a{text-decoration: none;}
    #head{height: 102px;width: 100%;}
    #head-left{width: 798px;height: 102px;float:left}
    #head-left>img{width: 192px;height: 47px;float: left;padding-left:141px;padding-top: 27px;}
    #head-left>.username{width:304px;height:24px;background: url('./img/006.jpg') right center no-repeat ;padding-top: 10px;position: relative;top: 30px;float: right;}
    #header{height: 63px;background: rgb(40, 50, 59);}
    #last{height: 102px;background: rgb(41,45,54);}
    #head-right{width:720px;height: 102px;float: left;}
    #head-title{width: 333px;height: 27px;position: relative; top: 35px;left:105px;float: left;border-right: rgb(230,230,230) 3px solid;}
    #head-title>a{margin-left: 20px;}
    #head-right-right>img{width: 68px;height: 37px;position: relative;top: 28px;left: 150px;}
    #header-left{width:798px;height: 63px;float:left}
    #header-right{width:720px;height: 63px;float: left;}
    #left{width: 486px;height: 39px;position: relative;left: 228px;top: 15px;}
    #left>a{color: white;font-size: 20px;padding-left: 20px;}
    #right>img{width: 28px;height: 20px;float:right;position: relative;right: 225px;bottom: 20px;}
    #header-right{width: 572px;height: 31px;} 
    .geyao{position: relative;top: 15px;left: 50px;}
    .geyao>img{width: 20px;height: 20px;float: left;}
    .geyao>.right1{position: relative;top: 4px;left: 8px;}
    .geyao>.right2{position: relative;top: 5px;left: 8px;}
    .geyao>.right3{position: relative;top: 4px;left: 8px;}
    .geyao>.right4{position: relative;top: 4px;left: 8px;}
    .geyao>.right5{position: relative;top: 4px;left: 8px;}
    .geyao>a{font-size: 20px;float: left;color: rgb(160,161,163);padding-left: 15px;}
    #body{height: 581px;background: rgb(73,86,111);}
    #body-left{width: 798px; height:581px;float: left;}
    #body-left1{width: 324px;height: 324px;margin: 0 auto;}
    #body-left2{width: 290px;height: 66px;border-radius: 30px;border:1px solid rgb(136,143,160);
    margin: 30px auto;}
    #body-left2>span{font-size: 40px;font-family: 宋体;display: block;color: rgb(136,143,160);
    position: relative;left: 35px;top: 10px;}
    #body-left3{position: relative;left: 200px;}
    #body-top{width: 68px;height: 68px;border-radius: 34px;background: url('./img/15.jpg');float: left;}
    #body-bottom{width: 301px;height: 74px;background: url('./img/16.jpg');float: left;}
    #body-right{width: 720px;height: 531px;float: left;}                                                
    #body-right1{width: 503px;height: 131px;}
    #body-right1>h1{color: rgb(136,143,160);}
    #body-right1>img{width: 32px;height: 16px;position: relative;bottom: 30px;left: 130px;}
    #body-right3>p{display: block;color: rgb(136,143,160);}
    #body-right2{width: 503px;height: 300px;overflow-y: scroll;}
    #body-right2::-webkit-scrollbar { width: 4px;    /*height: 4px;*/}
    #body-right2::-webkit-scrollbar-thumb {border-radius: 10px;-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);background: rgba(0,0,0,0.2);}
    #body-right2::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);border-radius: 0;background: rgba(0,0,0,0.1);}
    #last1{width: 330px;height: 100px;float: left;}
    #last1>.im1{float: left;position: relative;left:100px ;top:20px;width: 50px;height: 50px; padding-left: 10px;}
    #last1>.im2{float: left;position: relative;left:115px ;top:10px;width: 60px;height: 60px;
    padding-left: 10px;}
    #last1>.im3{float: left;position: relative;left:140px ;top:25px;width: 50px;height: 50px;
    padding-left: 10px;}
    #last2{width: 579px;height: 79px;float: left;}
    #last2-left{width: 57px;height: 57px;float: left;position: relative;left: 120px;top: 10px;}
    #last2-right{width: 357px;height: 57px;float: left;position: relative;left: 140px;top: 13px;}
    #last3{width: 131px;height: 102px;float: left;}
    #last31{width: 13px;height: 33px;float: left;position: relative;left: 160px;top: 40px;}
    #last32{width: 13px;height: 33px;float: left;position: relative;left: 190px;top: 40px;}
    #last33{width: 13px;height: 33px;float: left;position: relative;left: 220px;top: 40px;}
    #last34{width: 13px;height: 33px;float: left;position: relative;left: 250px;top: 40px;}
    #last35{width: 43px;height: 33px;float: left;position: relative;left: 300px;top: 35px;}
</style>
</head>
<body>
    <div id="head">
        <div id="head-left">
            <img src="./img/004.jpg" alt="">
            <input type="text" class="username">
        </div>
        <div id="head-right">
                <div id="head-title">
                <a href="">客服中心</a>
                <a href="">招贤纳士</a>
                <a href="">会员中心</a>
                </div>
                <div id="head-right-right">
                <img src="./img/007.jpg">
            </div>
     </div>
      </div>  
    <div id="header">
        <div id="header-left">
            <div id="left">
            <a href="">首页</a>
            <a href="">榜单</a>
            <a href="">下载客户端</a>
            <a href="">更多</a>
            </div>
            <div id="right">
            <img src="./img/008.jpg">
            </div> 
       </div>
        <div id="header-right">
                <div class="geyao">
                    <img class="right1" src="./img/1.jpg">
                    <a href="">音乐直播</a>
                </div>
                <div class="geyao">
                        <img class="right2" src="./img/2.jpg">
                        <a href="">酷狗LIVE</a>
                </div>
                <div class="geyao">
                        <img  class="right3" src="./img/3.jpg">
                        <a href="">音乐人</a>
                </div>
                <div class="geyao">
                        <img class="right4" src="./img/4.jpg">
                        <a href="">成为主播</a>
                </div>
                <div class="geyao">
                        <img class="right5" src="./img/5.jpg">
                        <a href="">商城</a>
                </div>
            </div>
        </div>      
    </div>
    <div id="body">
        <div id="body-left">
            <div id="body-left1">
                <img src="./img/11.jpg">
            </div>
            <div id="body-left2">
                    <span>下载这首歌</sapn>
            </div>
            <div id="body-left3">
            <div id="body-top"></div>
            <div id="body-bottom"></div>
            </div>
        </div>
        <div id="body-right">
            <div id="body-right1">
                <h1>桥边姑娘</h1>
                <img src="./img/20.jpg">
                <div id="body-right3">
                <p>专辑:桥边姑娘&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;歌手:海伦</p>
            </div>
            </div>
            <div id="body-right2">
                <p>桥边姑娘 - 海伦</br>
                        词：海伦</br>
                        曲：海伦</br>
                        视觉：华玮轩</br>
                        暖阳下 我迎芬芳 是谁家的姑娘</br>
                        我走在了那座小桥上</br>
                        你抚琴奏忧伤</br>
                        桥边歌唱的小姑娘 你眼角在流淌</br>
                        你说一个人在逞强 一个人念家乡</br>
                        风华模样 你落落大方</br>
                        坐在桥上 我听你歌唱</br>
                        我说桥边姑娘 你的芬芳</br>
                        我把你放心上 刻在了我心膛</br>
                        桥边姑娘 你的忧伤</br>
                        我把你放心房 不想让你流浪  </br>
                        暖阳下的桥头旁 有这样一姑娘</br>
                        她有着长长的乌黑发 一双眼明亮</br>
                        姑娘你让我心荡漾 小鹿在乱撞  </br>                      
                        你说无人在身旁 一个人在流浪 </br>                      
                        风华模样 你落落大方  </br>                     
                        坐在桥上 我听你歌唱   </br>                    
                        我说桥边姑娘 你的芬芳   </br>                   
                        我把你放心上 刻在了我心膛  </br>                   
                        桥边姑娘 你的忧伤   </br>                 
                        我把你放心房 不想让你流浪 </p>
            </div>
    </div>
    </div>
    <div id="last">
            <div id="last1">
                <div class="im1">
                    <img src="./img/22.jpg">
                </div>
                <div class="im2">
                        <img src="./img/23.jpg">
                </div>
                <div class="im3">
                        <img src="./img/25.jpg">
                </div>
                    </div>
                    <div id="last2">
                        <div id="last2-left">
                        <img src="./img/28.jpg">
                    </div>
                    <div id="last2-right">
                            <img src="./img/29.jpg">
                        </div>
                    </div>
                    <div id="last3">
                        <div id="last31">
                            <img src="./img/31.jpg" alt="">
                        </div>
                        <div id="last32">
                          <img src="./img/32.jpg" alt="">
                            </div>
                        <div id="last33">
                         <img src="./img/33.jpg" alt="">
                        </div>
                        <div id="last34">
                        <img src="./img/34.jpg" alt="">
                       </div>
                      <div id="last35">
                       <img src="./img/35.jpg" alt="">
                    </div>
                </div>
            </div>  
   </body>
  
</body>
</html>

2.2.1博文尚美页面预览

这个页面的来源应该是来自于某学习平台 时间也是比较久远的

 

2.2.2博文尚美页面代码

这边也是一个简单的div+css的布局 页面不是简简单单的单页面开发了 居然多了公共样式 也是不会采用多余的布局 上面的桥边菇凉应该就是参照改布局进行布局的

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>博文尚美</title>
    <link rel="stylesheet" href="./css/common.css">
    <style>
    #banner{position: relative;}
    #banner .banner_list{width: 100%;height: 469px;position: relative;}
    #banner .banner_list li{background: center 0 no-repeat;width: 100%;height: 100%;position: absolute;left: 0;top: 0;opacity: 0;z-index: 1;}
    #banner .banner_list a{display: block;width: 100%;height: 100%;}
    #banner .banner_list li.active{opacity: 1;z-index: 10;}
    #banner .banner_btn{width: 100%; position: absolute;bottom: 19px;font-size: 0;text-align: center;z-index: 20;}
    #banner .banner_btn li{display: inline-block;width: 12px;height: 12px;border:2px solid white ;
    border-radius: 50%;box-sizing: border-box;margin: 0 6px;cursor: pointer;}
    #banner .banner_btn li.active{background: white;}
    
   #service{overflow: hidden;min-height: 407px;}
    #service .area_title{text-align: center;}
    #service .service_list{text-align: center;margin-top: 34px;}
    #service .service_list li{float: left;width: 250px;margin: 0 10px;}
    #service .service_list div{width: 102px;height: 102px;margin: 0 auto;}
    #service .service_list li:nth-of-type(1) div{background-image: url(./images/web1.png);}
    #service .service_list li:nth-of-type(2) div{background-image: url(./images/mail1.png);}
    #service .service_list li:nth-of-type(3) div{background-image: url(./images/graphic1.png);}
    #service .service_list li:nth-of-type(4) div{background-image: url(./images/e-bussiness1.png);}
    #service .service_list h3{font-size: 18-x;color: #434343;line-height: 36px;}
    #service .service_list p{font-size: 14px;color:#6D6D6D;line-height: 22px;} 

    #case{background: #f8f8f8;}
    #case .container{min-height:460px;overflow: hidden;}
    #case .area_title{margin-top: 55px;}
    #case .area_title h2{color: #66c5B4;}
    #case .case_list{margin-top: 28px;}
    #case .case_list li{float: left;width: 340px;margin:  0 10px;}
    #case .case_btn{width: 176px;height: 37px;background: #66C584;margin: 0 auto;
    border-radius: 25px;line-height: 37px;text-align: center;color: white;font-size:14px;margin-top: 36px;}
    #case .case_btn a{display: block;width: 100%;height: 100%;}

    #news{min-height: 450px;overflow: hidden;}
    #news .area_title{margin-top: 65px;}
    #news dl{margin-top: 48px;}
    #news dt{width: 234px;}
    #news dd{width: 846px;}
    #news .news_list{width: 100%;}
    #news .news_list li{width: 50%;float: left;margin-bottom: 48px;}
    #news .news_date{width: 71px;height: 70px;border-right: 1px solid #DCDCDC;text-align: center;}
    #news .news_date i{color: #66C584;font-size: 39px;display: block;font-weight: bold;}
    #news .news_date span{color:#999999;font-size: 20px;line-height: 36px;}
    #news .news_text{width: 310px;margin-left: 20px;}
    #news .news_text h3{font-size: 14px;}
    #news .news_text h3 a{color:#3F3F3F}
    #news .news_text p{color: #A4A4A4;font-size: 12px;line-height: 21px;margin-top: 17px;}
</style>
</head>
<body>
    <div id="head" class="container">
        <div class="head_logo l">
            <a href="#">
                <img src="./images/logo.png" alt="" title="博文尚美">
            </a>
        </div>
        <ul class="head_menu r">
            <li>
                <a href="#">HOME</a>
            </li>
            <li>
                <a href="#">ABOUT</a>
            </li>
            <li>
            <a href="#">PROTFOLIO</a>
            </li>
            <li>
                <a href="#">SERVICE</a>
            </li>
            <li>
                <a href="#">CONTACT</a>
            </li>
        </ul>
    </div>
    <div id="banner" class="container-fluid">
        <ul class="banner_list">
            <li class="active" style="background-image: url(./images/banner.png);">
                <a href="#"></a>
            </li>
            <li  style="background-image: url(./images/banner.png);">
                <a href="#"></a>
            </li>
            <li  style="background-image: url(./images/banner.png);">
                <a href="#"></a>
            </li>
            <li  style="background-image: url(./images/banner.png);">
                <a href="#"></a>
            </li>
        </ul>
        <ol class="banner_btn">
            <li class="active">
                
            </li>
            <li>
                
            </li>
            <li>
                
            </li>
            <li>
                
            </li>
        </ol>
    </div>
    <div id="service" class="container">
        <div class="area_title">
            <h2>服务范围</h2>
            <p>OUT SERVICES</p>
        </div>
         <ul class="service_list">
            <li>
                <div></div>
                <h3>1.web design</h3>
                <p>我是歌谣，我是最棒的<br>我是歌谣，我是最棒的</p>
            </li>
            <li>
                <div></div>
                <h3>2.graphic design</h3>
                <p>我是歌谣，我是最棒的<br>我是歌谣，我是最棒的</p>
            </li>
            <li>
                <div></div>
                <h3>3.e-business plan</h3>
                <p>我是歌谣，我是最棒的<br>我是歌谣，我是最棒的</p>
            </li>
            <li>
                <div></div>
                <h3>4.mailboxagents</h3>
                <p>我是歌谣，我是最棒的<br>我是歌谣，我是最棒的</p>
            </li>
        </ul> 
    </div>
    <div id="case" class="container-fluid">
        <div class="container">
            <div class="area_title">
                <h2>[客户案例]</h2>
                <p>with the bost professional technology,to design the best inn</p>
            </div>
        <ul class="case_list clear">
            <li>
                <li><a href="#"><img src="./images/20141121095528549.png" alt=""></a></li>
            </li>
            <li>
                <li><a href="#"><img src="./images/20141121095528549.png" alt=""></a></li>
            </li>
            <li>
                <li><a href="#"><img src="./images/20141121095528549.png" alt=""></a></li>
            </li>
        </ul>
            <div class="case_btn">
                <a href="#">view movn</a>
            </div>
        </div>
    </div>
    <div id="news" class="container">
        <div class="area_title">
            <h2>最新资讯</h2>
            <p>TEN LATEST NEWS</p>
        </div>
        <dl>
            <dt class="l">
               <img src="./images/xs1.png">
            </dt>
            <dd class="l">
                <ul class="news_list">
                    <li>
                        <div class="news_date l">
                            <i>09</i>
                            <span>jan</span>
                        </div>
                        <div class="news_text l">
                            <h3><a href="#">网站排名前三的技巧说明</a></h3>
                            <p>我是歌谣我是歌谣我是歌谣我是歌谣我是歌谣我是歌谣</p>
                        </div>
                    </li>
                    <li>
                        <div class="news_date l">
                            <i>09</i>
                            <span>jan</span>
                        </div>
                        <div class="news_text l">
                            <h3><a href="#">网站排名前三的技巧说明</a></h3>
                            <p>我是歌谣我是歌谣我是歌谣我是歌谣我是歌谣我是歌谣</p>
                        </div>
                    </li>
                    <li>
                        <div class="news_date l">
                            <i>09</i>
                            <span>jan</span>
                        </div>
                        <div class="news_text l">
                            <h3><a href="#">网站排名前三的技巧说明</a></h3>
                            <p>我是歌谣我是歌谣我是歌谣我是歌谣我是歌谣我是歌谣</p>
                        </div>
                    </li>
                    <li>
                        <div class="news_date l">
                            <i>09</i>
                            <span>jan</span>
                        </div>
                        <div class="news_text l">
                            <h3><a href="#">网站排名前三的技巧说明</a></h3>
                            <p>我是歌谣我是歌谣我是歌谣我是歌谣我是歌谣我是歌谣</p>
                        </div>
                    </li>
                </ul>
            </dd>
        </dl>
    </div>
</body>
</html>

common.css

*{margin: 0;padding: 0;}
ul,ol{list-style: none;}
img{display: block;}
a{text-decoration: none;color: #646464;}
h1,h2,h3{font-size: 16px;}
body{font-family: Arial, Helvetica, sans-serif;}

.l{float: left;}
.r{float: right;}
.clear:after{content: "";display: block;clear: both;}
.container{width: 1080px;margin:0 auto;position: relative;}
.container-fluid{width: 100%;}
/* 浮动元素不会出现传递操作 */
#head{height: 81px;}
#head .head_logo{width: 162px;height: 44px;margin-top: 19px;}
#head .head_menu{font-size: 14px;line-height: 81px;}
#head .head_menu li{float: left;margin-left: 54px;}

.area_title{margin-top: 60px;text-align: center;}
.area_title h2{height: 20px;line-height: 20px;font-size: 20px;color: #363636;background: url(../images/title_bg.png) no-repeat center 7px;font-weight: bold;}
.area_title p{color: #9F9F9F;font-size: 14px;line-height: 14px;}

2.3.1qq飞车页面预览

对于这种网页一看就不是网上学习所能够获得的 只能通过自己的慢慢手写 那时候还是有毅力的

2.3.2qq飞车页面代码

不断的多练 多写 对样式的理解 页面自然越来越熟悉 代码 这部分也多有了公共的样式编写

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>qq飞车首页</title>
    <link rel="stylesheet" href="./css1/common.css">
    <style>
        /* 导航栏块 */
        /* 加入大块背景图 */
        #main{background: url(./images1/bg20190104.jpg) no-repeat center 0;}
        /* 两块背景图 */
        #nav{min-height: 236px;background:url(./images1/nav_d
最低0.47元/天 解锁文章
前端小歌谣
关注
专栏目录
一文带你理解vue创建一个后台管理系统流程（Vue+Element）
歌谣的博客
05-14 1万+
我是歌谣 放弃很容易 但是坚持一定很酷 1前言 本文根据自己工作经历编写，若有不合理之处，欢迎吐槽 2定义 后台管理系统什么 对一个页面进行增删改查 是不是有点像，不重复定义 3第一次接触后台管理系统 第一次接触后台管理系统是某b站的一个后台管理系统（Vue+Element 实现电商管理系统） 那时候还是很努力的去跟着视频编写 当时也是认真编写完成这个后台管理系统 现在已经找不到那个代码了 当时换了电脑 代码就丢失了 反正是b站的视频学习所得 3.1原始版后台管理（Vue+Elem.
用html+css作一个漂亮的网页
12-29
html+css+js学习
html中写css代码,带你入门HTML+CSS网页设计，编写网页代码的思路
weixin_34916118的博客
05-30 2056
这篇文章主要给大家详细解释一下这些代码的作用和意义，以及编写网页代码的格式与思路。下面我贴上html代码：这是我的第一个网页BODY标签表示网页主体元素的容器，它包含了网页所有的html标签如：文本、图片、列表等等。以后我们编写的网页标签都需要放在这里面，这里我写了一段文字，它就会在浏览器里显示出来。这些就构成了我们网页的基本格式，大家也不需要去背，知道表示什么意思就行，需要的时候直接拿来用。从代...
HTML + CSS 学习指南：从入门到精通
最新发布
qq_22232065的博客
08-01 870
HTML 和 CSS 在网页开发中扮演着至关重要的角色。HTML 如同网页的骨架，为网页提供了基本的结构和内容。它使用各种标签来定义页面的元素，如标题、段落、图片、链接等，确保信息得以有条理地组织和呈现。CSS 则恰似网页的华服，负责赋予网页美观的外观和舒适的布局。通过控制字体、颜色、背景、间距等样式属性，CSS 让网页变得更加吸引人，提升用户的阅读和交互体验。二者之间的关系紧密且相辅相成。HTML 为 CSS 提供了可操作的基础元素，而 CSS 则依据 HTML 的结构来施展其美化和布局的魔法。
网页制作基础学习——HTML+CSS
学会改变自己——才能突破
04-29 1万+
网络是大家经常使用的东西，他帮助我们解决了很多问题，在我们生活中扮演着举足轻重的作用。但是如何制作呢，现在已经有很多专门的网页制作软件了（例如：Dreamweaver，Fireworks），而这些软件的根本都是生成代码，让浏览器进行读取，所以我先从背后代码的部分开始学习，进行简单总结。          首先：HTML（HyperText Markup Language）,即超文本
HTML和CSS网页设计
weixin_45728236的博客
12-12 1864
css书写位置 ：行内式 外链式 内嵌式 行内式 ：直接输写在标签内部的一个style属性里,前端人员一般不使用 外链式 ：通过link标签在html 外部引入一个css文件 link标签 书写在head标签内部 rel=“stylesheet” rel表示html和css的关系，stylesheet样式表 type=“text/css” type表示css文件类型,text/css纯...
基于html和css的网页
07-12
基于html和css样式历史网页开发，分为首页和各二级页面，采用导航栏的形式链接
Css Hover动画文件
08-12
描述中提到的“十万行不同动画效果”，这可能意味着`hover.css`文件中包含了大量精心设计的CSS代码块，每一种都对应一个独特的悬停动画。开发人员可以根据需求，灵活地选择并复制其中的样式规则，应用到自己的项目中...
web前端面试题完美整理/涵盖html,CSS、JS、浏览器、Vue、React、移动web。
A曾大大的博客
04-15 767
本篇文章整理总结了一些前端面试题，涵盖面很广，并且面的都是知名大厂，所以这些题还是很有代表性的，都掌握以后一面基础面应该没什么问题，二面也能应付大半，奉上： css相关 更多教程：https://sucaiip.com/ 万能居中 1.margin: 0 auto;水平 2.text-align: center;水平 3.行高，垂直 4.表格，center,middle；水平垂直 5.disp...
HTML+CSS做一个漂亮的网页
热门推荐
前端攻城狮进阶之路
06-26 6万+
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;title&gt;test9-11&
html+css网页设计源代码
11-07
这是一个div+css布局方式设计的一个完整的网站源代码，可用于教学或自学。
html+css网页设计源码(简洁)
12-25
html+css网页设计源码(简洁)，前端基础代码，拿来就用 评分: ⭐⭐⭐⭐⭐
只使用html和css做的两个网页
05-11
大一自己编写的只使用HTML和css的两个简单的网页，代码总共约400行。
读库网站---用HTML和CSS 做的几个网页
07-04
去年参加实训的时候和朋友一起做的几个网页，很基础，刚学习HTML和CSS的朋友可以看一下
实训-利用HTML和CSS制作一个网页界面
qq_44888570的博客
09-29 3万+
项目介绍 学习HTML和CSS有一段时间了，笔者做完了一个相对练习而言较为复杂的网页，纽曼官网首页，上一下效果图： 这个网页相对来说还是比较有练习意义的，包含导航栏，轮播图，大量的浮动和弹性布局以及一些细小却重要的知识点。 需求分析 自顶向下，先整体在局部，我们慢慢分析。 1.Header： 头部比较简单，左侧有一个图片logo，右侧一个横向导航栏，每个单元有悬停效果。最右侧有个语言切换标志。 2.Body： 一个轮播图，有图片计数器和前进后退控制器。接下来有四个大部分，四部分均有一个标题及说明，再接具体
带你入门HTML+CSS网页设计，编写网页代码的思路
qq_38515154的博客
05-16 476
从代码当中可以发现，所有的标签内容都被一个div标签所包含着，div属于组合块级元素，常用来区分不同的区域或模块，它可以是独立的，可分割的，它有自动换行的属性，但你可以通过使用css来给它定义样式或布局。h2属于标题标签，从h1到h6都可以自定义，一般网页的标题或者需要着重表现的都可以用，p标签表示段落或者一段文字介绍，img标签表示页面中的图像，你可以直接引入图片地址，注意，它是一个单标记。文字介绍和标题差不多，就是字体小一点，注意的是需要给段落定义一个行高，调整段落之间的间隔。
使用HTML+CSS制作一个简单的网页
m0_57423785的博客
11-25 1万+
简单学习了一下HTML和CSS，制作了下面这个网页（第一次做还在学习中），里面包含一些基础的布局包括导航条、分页栏、悬浮列表等内容。
对于一个从未接触过的，数十万行代码的项目我该怎么去入手？
04-20
对于一个从未接触过的，数十万行代码的项目，建议采取以下步骤入手： 1.先了解项目的整体结构和架构，通读项目的文档和注释，了解项目的基本功能和目标。 2.分析项目的各个模块和组件之间的关系，判断它们的重要性...
评论 16
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端小歌谣

放弃很容易 但是坚持一定很酷

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值