HTML + CSS 案例

冰蝶

2020-01-10

1.HTML部分

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入css文件  -->
<link rel="stylesheet" href="login.css">
</head>
<body>
  <header>
    <img src="http://www.xxx.cn/tstore_v1/images/header/logo.png">
    <h1>欢迎登录</h1>
  </header>
  <article>
    <form action="http://www.xxx.cn">
      <div id="form_div">
        <div>
          <p>
            登录学子商城 <a href="">新用户注册</a>
          </p>
          <div class="filed">
            <input type="text" placeholder="请输入您的用户名" name="username">
            <img src="http://www.xxx.cn/tstore_v1/images/login/yhm.png">
            <p>用户名不能为空！</p>
          </div>
          <div class="filed">
            <input type="password" placeholder="请输入您的密码" name="passowrd">
            <img src="http://www.xxx.cn/tstore_v1/images/login/mm.png">
            <p>密码不能为空！</p>
          </div>
          <div id="auto_div">
            <input id="auto" type="checkbox" name="auto">
            <!-- label用于扩充点击范围 -->
            <label for="auto">自动登录</label> <a href="">忘记密码？</a>
          </div>
          <input type="submit" value="登录">
        </div>
      </div>
    </form>
    <div id="service_div">
      <div>
        <img src="http://www.xxx.cn/tstore_v1/images/footer/icon1.png">
        <p>品质保障</p>
      </div>
      <div>
        <img src="http://www.xxx.cn/tstore_v1/images/footer/icon2.png">
        <p>私人订制</p>
      </div>
      <div>
        <img src="http://www.xxx.cn/tstore_v1/images/footer/icon3.png">
        <p>学员特供</p>
      </div>
      <div>
        <img src="http://www.xxx.cn/tstore_v1/images/footer/icon4.png">
        <p>专属特权</p>
      </div>
    </div>
  </article>
  <footer>
    <div>
      <div id="left_div">
        <img src="http://www.xxx.cn/tstore_v1/images/footer/logo.png">
        <img src="http://www.xxx.cn/tstore_v1/images/footer/footerFont.png">
      </div>
      <div id="center_div">
        <ul>
          <li><a href="">买家帮助</a>
            <ul>
              <li><a href="">新手指南</a></li>
              <li><a href="">服务保障</a></li>
              <li><a href="">常见问题</a></li>
            </ul>
          </li>
           <li><a href="">商家帮助</a>
            <ul>
              <li><a href="">商家入驻</a></li>
              <li><a href="">商家后台</a></li>
            </ul>
          </li>
           <li><a href="">关于我们</a>
            <ul>
              <li><a href="">关于达内</a></li>
              <li><a href="">联系我们</a></li>
              <li>
                <img src="http://www.xxx.cn/tstore_v1/images/footer/wechat.png">
                <img src="http://www.xxx.cn/tstore_v1/images/footer/sinablog.png">
              </li>
            </ul>
          </li>
        </ul>
      
      </div>
      <div id="right_div">
        <div>
          <p>学子商城客户端</p>
          <img src="http://www.xxx.cn/tstore_v1/images/footer/ios.png">
          <img src="http://www.xxx.cn/tstore_v1/images/footer/android.png">
        </div>
          <img src="http://www.xxx.cn/tstore_v1/images/footer/erweima.png">
      </div>
    </div>
    <p>©2017 xxx集团有限公司 版权所有 京ICP证xxxxxxxxxxx</p>
  </footer>
</body>
</html>

2.CSS部分

@charset "UTF-8";
body {
    /* 去掉body自带8个像素的外边距 */
    margin: 0;
    font: 12px "simhei", Arial, Helvetica, sans-serif;
    color: #666;
    background-color: #f5f5f5;
}

header {
    /* 实现居中效果 */
    width: 1000px;
    margin: 0 auto;
    overflow: hidden; /* 解决高度识别为0的问题 */
    margin-top: 20px;
    margin-bottom: 30px;
}

header>img {
    float: left;
    margin-left: 40px;
}

header>h1 {
    float: left;
    font-size: 24px;
    color: #4f4d4e;
    /* 去掉加粗 */
    font-weight: normal;
    margin-left: 10px;
    margin-top: 10px;
}

#form_div {
    height: 560px;
    background-image: url("http://www.xxx.cn/tstore_v1/images/regist.png");
}

#form_div>div {
    /* 浮动到右上角 */
    float: right;
    margin: 122px 122px 0 0;
    width: 253px;
    height: 277px;
    padding: 10px; /* 实现内容不贴边显示 */
    background-color: rgba(0, 0, 0, 0.3);
}

#form_div>div>p {
    color: white;
    font-size: 18px;
    border-bottom: 1px solid white;
    padding-bottom: 10px;
}
/* 通过分组选择器选中两个超链接 */
p>a, #auto_div>a {
    float: right;
    color: white;
    font-size: 12px;
    text-decoration: none;
    margin-top: 5px;
}

.filed>input {
    width: 213px;
    border: 0; /* 去掉边框 */
    padding: 10px 20px;
}

.filed {
    position: relative; /* 给图片做位置参考 */
}

.filed>img {
    position: absolute;
    top: 4px;
    right: 20px;
}

.filed>p {
    color: red;
    margin-bottom: 10px;
}

#auto_div>label {
    color: white;
}

#auto_div>input {
    /* 如果需要对某个元素做位置的微调则使用以下方式 */
    position: relative;
    top: 3px;
}
input[type=‘submit‘]{
  width: 100%;
  height: 35px;
  background-color: #0aa1ed;
  color: white;
  border: 0;
  border-radius: 3px;
  margin-top: 5px;
}
#service_div{
  width: 1000px;
  margin: 0 auto;
  margin-top: 43px;
  margin-bottom: 74px;
  overflow: hidden;/* 解决高度为0的问题 */
}
#service_div>div{
  width: 250px;
  float: left;/* 纵向排列改成横向  */
  text-align: center;
}
#service_div>div>p{
  margin-top: 0;
}
footer{
  background-color: white;
  overflow: hidden;
}
footer>div{
  width: 1000px;
  margin: 0 auto;
  overflow: hidden;/* 高度识别为0的问题 */
  margin-top: 62px;
}
footer>div>div{
  width: 333px;
  float: left;
}
footer>p{
  text-align: center;
  color: black;
}
#center_div ul{
  list-style-type: none;/* 去掉图标 */
  padding: 0;/* 去掉二层ul的缩进  */
}
#center_div>ul>li{
  float: left;
  width: 111px;
  text-align: center;
}
#center_div>ul>li>a{
  font-size: 14px;
  color: #333;
  text-decoration: none;
}
#center_div>ul>li>ul>li>a{
  font-size: 12px;
  color: #808080;
  text-decoration: none;
  /* 修改显示方式为块级 不然添加不了外边距 */
  display:block;
  margin-top: 10px;
} 
#right_div>div{
  width: 160px;
  float: left;
  text-align: center;
}
#right_div>img{
  margin-top:13px;
  float: left;
}
#right_div>div>p{
  font-size: 14px;
  margin-bottom: 11px;
}

冰蝶

0 关注 0 粉丝 0 动态

关注关注

安科网

HTML + CSS 案例

冰蝶

冰蝶

冰蝶