项目布局

最新推荐文章于 2024-03-11 14:30:23 发布

LXJRQJ

最新推荐文章于 2024-03-11 14:30:23 发布

阅读量542

点赞数

分类专栏：前端 HTML 简单布局 CSS

本文链接：https://blog.youkuaiyun.com/LXJRQJ/article/details/86174069

版权

前端同时被 3 个专栏收录

34 篇文章

订阅专栏

HTML

9 篇文章

订阅专栏

CSS

9 篇文章

订阅专栏

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购酒网</title>
    <link rel="stylesheet" href="wangye.css">


</head>
<body>
<div class="ding"></div>
<div class="gao">
    <a href="#" target="_blank">
        <img src="img/7f07b37d61e940398f4d0b3d754e4690.jpg" alt="购酒网" />
    </a>
</div>
<div class="logo">
    <a href="#" target="_blank" class="z">
        <img src="img/logo1.jpg" alt="购酒网" class="GJW"/>
        <img src="img/i.gif" alt="购酒网" class="GJW2"/>
    </a>
</div>
<div class="lie">
    <ul class="t">
         <li id="nav">
            <a href="#">☰ &nbsp;全 部 分 类</a>
            <ul class="e" style="display: none">
                <li class="qw">
                    <a href="#">
                        <!--<img src="#">-->
                        <!--列表列-->
                    </a>
                </li>
            </ul>
         </li>
         <li><a href="#">首页</a></li>
         <li><a href="#">特卖会</a></li>
         <li><a href="#">进口商</a></li>
         <li><a href="#">商家采销</a></li>
         <li><a href="#">高端收藏</a></li>
         <li><a href="#">尾货直批</a></li>
    </ul>


</div>
<div class="zhu"></div>
<div class="yi">
    <div class="big">
        <ul class="c">
            <li>
                <a href="#" target="_blank">
                    <img src="img/d4bf88dd63174e37a0d36aac6d52c673.jpg" title="53度 茅台 赖茅 (传承) 蓝色 500ml" alt="购酒网"/>
                    <div class="q">
                        <span class="j">53度 茅台 赖茅 (传承) 蓝色 500ml          </span>
                        <span class="o">
                        <em>295</em>
                        "元"
                        </span>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</div>
<div class="er">

</div>
<div class="wei">
    <div class="xia">
        <div class="k">
            <div class="L"></div>
        </div>
    </div>
</div>
</body>
</html>

*{
    margin: 0;
    padding: 0;
}
body{
    font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
    background-image: url(img/login_bg.gif);
	animation:bg 150s linear infinite;
	-moz-animation:bg 100s linear infinite; /* Firefox */
	-webkit-animation:bg 100s linear infinite; /* Safari and Chrome */
	-o-animation:bg 100s linear infinite; /* Opera */
}
.clearfix:before,
.clearfix:after{
    content: "";
    display: table;
    clear:both;
 }
@keyframes bg
{
	0%   {background-position:0 0; }

	100% {background-position:-1000px -1000px;}
}

@-moz-keyframes bg /* Firefox */
{
	0%   {background-position:0 0; }

	100% {background-position:-1000px -1000px;}
}

@-webkit-keyframes bg /* Safari and Chrome */
{
	0%   {background-position:0 0; }

	100% {background-position:-1000px -1000px;}
}
@-ms-keyframes bg /* Safari and Chrome */
{
	0%   {background-position:0 0; }

	100% {background-position:-1000px -1000px;}
}
@-o-keyframes bg /* Safari and Chrome */
{
	0%   {background-position:0 0; }

	100% {background-position:-1000px -1000px;}
}

div{
    display: block;
}

.header{
    height: 89px;
    border-bottom: 1px solid;
    background: #ffffff;
}
.deng{
    margin-top: 4px;
    overflow: hidden;
}
a, .a:hover{
    text-decoration: none;
}
.fr-login {
    margin-top: 28px;
    height: 30px;
    line-height: 30px;
}
.bang{
    background: url(img/loginIcon.gif) no-repeat -1px -1px;
}
.set{
    display: inline-block;
    margin-top: -3px;
    margin-right: 5px;
    vertical-align: middle;
    width: 17px;
    height: 17px;
}
.mid .fr-login .fontRed{
    color:red;
}
.fr-login a {
    display: inline-block;
    margin-right: 30px;
    color: #000000;
}
.icon{
    color: red;
}
.icon {
    display: inline-block;
    margin-top: -3px;
    margin-right: 5px;
    vertical-align: middle;
    width: 17px;
    height: 17px;
}
.service{
    background: url(img/loginIcon.gif) no-repeat -25px -1px;
}
.mid{
    width: 980px;
}
.mid .deng{
    margin-top: 20px;
    float:left;
}
.fr-login{
    float: right;
}
.content{
    height: 581px;
    overflow: hidden;
    /*background-color: #bbffaa;*/
}
.mid{
    margin: 0 auto;
    width: 980px;
}
.login_box{
    overflow: hidden;
    padding: 70px 15px;
}
.lu{
    position: relative;
    width: 488px;
    height: 435px;
    background: #fff;
    border:1px solid #c5c5c5;
}
.fr{
    float: right;
}
.guanggao{
    width: 438px;
    height: 441px;
}
.fl{
    float: left;
}
.zhi{
    margin-bottom: 30px;
    text-align: center;
    height: 28px;
    line-height: 28px;
}
.man {
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    width: 28px;
    height: 28px;
    background: url(img/loginIcon.gif) no-repeat -94px -3px;
}
.shuru{
    margin: 20px auto;
    width: 350px;
    overflow: hidden;
}
.box7 input {
    width: 260px;
    border: none;
    height: 24px;
    line-height: 24px;
    padding-bottom: 3px;
    background: transparent;
    vertical-align: middle;
    text-indent: 20px;
}
.box7 {
    position: relative;
    margin-top: -1px;
    width: 348px;
    height: 52px;
    line-height: 52px;
    border: 1px solid #c5c5c5;
}
.box7 .user {
    width: 18px;
    height: 18px;
    background: url(img/loginIcon.gif) no-repeat -46px -2px;
}
.box7 .pwd {
    width: 18px;
    height: 18px;
    background: url(img/loginIcon.gif) no-repeat -72px -1px;
}
.box7 i {
    display: inline-block;
    vertical-align: middle;
    margin-top: -2px;
    margin-left: 20px;
}
.zhidong{
    height: 54px;
    line-height: 54px;
    color: #999999;
    /*float: left;*/
}
.wanngji{
    float: right;
}
a, .a:hover{
    text-decoration: none;
    color: #999999;
}
.loginBtn {
    /*display: block;*/
    width: 348px;
    height: 42px;
    line-height: 42px;
    /*text-align: center;*/
    font-size: 15px;
    color: #fff;
    border: 1px solid #dc0014;
    background: #fe0a2e;
    /*box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.9);*/
    /*cursor: pointer;*/
}
.xiuxian{
    margin-left: 30px;
    background: url(img/dashed_bg_06.gif);
    width: 432px;
    height: 7px;
}
.dlx{
    margin: 10px auto;
    width: 350px;
    /*background-color: #bbffaa;*/
}
.dlx .qq{
    width: 38px;
    height: 38px;
}
.dlx a{
    display: block;
    float: left;
    margin-right: 20px;
    margin-top: 9px;
}
.zczh{
    position: absolute;
    right: -1px;
    display: block;
    width: 113px;
    height: 38px;
    background: #ff0421;
    text-align: center;
    line-height: 38px;
    color: #ffffff;
    bottom: -38px;
}
.zhidong span{
    line-height: 15px;
    display: inline-block;
    position: relative;
    top: -3px
}
a, a:hover {
    text-decoration: none
}
.foot{
    margin-top: 50px;
    text-align: center;
    line-height: 22px;
}
.ban a{
    color:#000;
}