HTML/CSS初写静态网页

来源：互联网发布：单片机教材下载编辑：程序博客网时间：2024/06/01 08:59

收藏一个第一次做的网页（也是最垃圾的）
缺点：代码乱，排版乱，没思想，很差劲呀(勿喷)

这里写图片描述

不多说了，直接贴代码

HTML

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>csdn</title>    <link href="框架布局.css" rel="stylesheet" type="text/css"></head><body><div class="dingbu1">    <img class="img1" src="0.jpg">    <span>阿水的阿里</span>    <img class="img2" src="Image%201.png"></div><div class="dingbu2">    <span>        <a href="#">阿水底蕴</a>    </span>    <span>        <a href="#">阿里建设</a>    </span>    <span>        <a href="#">阿水干部</a>    </span>    <span>        <a href="#">阿里浏览</a>    </span></div><div class="zong">    <div class="neirong1">        <img class="img3" src="下载.jpg">    </div>    <div class="neirong2">        <div><img src="乡村1.jpg"></div>        <div><img src="乡村2.jpg"></div>        <div><img src="乡村3.jpg"></div>        <div><img src="乡村3.jpg"></div>        <div><img src="乡村1.jpg"></div>        <div><img src="乡村2.jpg"></div>        <div><img src="乡村3.jpg"></div>        <div><img src="乡村3.jpg"></div>        <div><img src="乡村3.jpg"></div>        <div><img src="乡村3.jpg"></div>    </div>    <div class="neirong3">        <form>            <th>用户名</th><input type="text" placeholder="输入至少3个英文字母">        </form>        <form class="c1">            <th>密码</th><input type="password" placeholder="请输入至少6位的密码">        </form>        <a href="#" class="a1"><img src="下载2.jpg" class="img4"></a>    </div>    <div class="neirong4">        <img src="biankuang.png">    </div></div><div class="dibu">    <span><a href="#">| 广告服务 |</a></span>    <span><a href="#">| 联系方式 |</a></span>    <span><a href="#">| 版权声明 |</a></span>    <span><a href="#">| 问题报告 |</a></span>    <span><a href="#">| 法律顾问 |</a></span>    <span><a href="#">| 论坛反馈 |</a></span></div></body></html>

CSS

*{    margin: 0px;    padding: 0px;    background-color: #bebebe;    font-family: 微软雅黑;}.dingbu1{    margin: 0px;    width: 100%;    height: 50px;    background-color: #606060;    line-height: 50px;    color: #fdfdfd;}.img1{    margin-left: 300px;}.img2{    float: right;    height: 53px;}.dingbu1 span{    position: absolute;    right: 650px;    margin: 0px auto;    float: right;    font-size: 40px;    color: brown;    background-color: darkkhaki;    border-radius: 50px;}.dingbu2{    margin: 0px;    width: 100%;    height: 65px;    background-color: #ffffff;}.dingbu2 span a{    margin-left: 50px;    margin-top: 10px;    padding: 10px;    background-color:#ffffff ;    float: left;    font-size: 20px;    text-decoration: none;    color: black;}.zong{    margin: 10px auto;    width: 1200px;    height: 1200px;    margin-bottom: 10px;}.neirong1{    float: left;    width:100%;    height:200px;    background-color: #fcfcfc;}.img3{    width: 100%;    height: 200px;}.neirong2{     float: left;    margin-top: 10px;    width: 800px;    height: 1000px;    background-color: #fdfdfd;}.neirong2 div{    width:10px;    margin: 5px;}.neirong2 div img{    float: left;    width: 780px;    height: 100px;}.neirong3{    float: right;    margin-top: 10px;    width: 370px;    height:200px;    background-color: #fdfdfd;}form{    padding: 10px;    background-color: #fbffed;}input{    background-color: #fbffed;    border-style: groove;    border-color: #c9ccbe;    height: 20px;}.c1{    margin-left: 15px;}.img4{    float: left;   position: relative;    left: 60px;}.neirong4{    float: right;    margin-top: 8px;    width: 370px;    height: 100px;    background-color: #fdfdfd;}.neirong4 img{    width: 370px;}.dibu{    margin-top: 25px;    margin-right: auto;    margin-left: auto;    width: 1200px;    height: 70px;    background-color: #fdfdfd;}.dibu span a{    margin-left: 50px;    margin-top: 3px;    padding: 5px;    background-color:#ffffff ;    float: left;    font-size: 10px;    text-decoration: none;    color: black;}

4 0