html5+Css3 做一个婚纱网页

最新推荐文章于 2023-04-09 23:12:24 发布

置顶

赛文

最新推荐文章于 2023-04-09 23:12:24 发布

阅读量4.6k

点赞数 9

分类专栏： html5/Css3

本文链接：https://blog.csdn.net/qq_39493777/article/details/78027789

版权

这个示例展示了如何使用HTML5和CSS3技术制作一个专业的婚纱主题网页。网页包含美观的布局，如浮动元素、链接样式、响应式设计以及用于导航和展示婚纱套系的模块。页面顶部有品牌Logo、联系方式，还有滚动的最新活动和动态区域。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>婚纱</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .inner{
            width: 1100px;
            margin: 0 auto;
        }
        .clear:after{
            content: "\200B";
            display: block;
            clear: both;

        }
        a{
            text-decoration: none;
        }
        .logo{
            display: block;
            float: left;
            margin-top: 19px;
            margin-bottom: 24px;
        }
        .tell{
            width: 246px;
            height: 74px;
            float: right;
            padding-left: 20px;
            background: url("../img/tel.png") no-repeat left top;
        }
        .z{
            font-size: 15px;
            color: #666;
        }
        .zz{
            font-size: 25px;
            color: #999;
        }
        .xia{
            margin-top: 15px;
            margin-left: 5px;
        }
        .nav{

        }
        .nav ul li{
            width: 125px;
            height: 18px;
            margin: 0 2px;
            float: left;
            list-style: none;
            text-align: center;
            line-height:18px;
            border-left: 1px dashed #666666;
            border-right: 1px dashed #666666;
        }
        .nav ul li a:link{
 color: black}
        .nav ul li a:hover{
 color: blue}

        .zui{
            position: relative;
            margin-top: 40px;
        }
        .zui p{
            width: 100%;
            height: 1px;
            background: red;
        }
        .huo{
            width:360px;
            height: 40px;
            line-height: 40px;
            color: red;
            font-size: 27px;
            text-align: center;
            background: #fff;
            position: absolute;
            left: 50%;
            top:-20px;
            margin-left:-180px;
            border-right: 2px solid red;
            border-left: 2px solid red;

        }
        .zi{
            position: relative;
            top: 40px;
        }
        .p1{
            text-align: center;
        }
        .p2{
            text-align: center;
        }
        .tu1{
            width: 1100px;
            height: 255px;
            position: relative;
            top: 69px;
        }
        .tuzuo{
            float: left;
            width: 541px;
            height: 254px;

        }
        .tuyou{
            float: right;
            width: 541px;
            height: 254px;
        }
        .tu2{
            width: 1100px;
            height: 290px;
            position: relative;
            top: 200px;
        }
        .d1{
            float: left;

        }
        .d2{
            float: left;
            margin-left: 20px;
        }
        .d3{
            float: left;
            margin-left: 20px;
        }
        .d4{
            float: right;
        }
        .tai{
            position: relative;
            top: 240px;
        }
        .tai p{
            width: 100%;
            height: 2px;
            background: red;
        }
        .dong{
            width:360px;
            height: 40px;
            line-height: 40px;
            color: red;
            font-size: 27px;
            text-align: center;
            background: #fff;
            position: absolute;
            left: 50%;
            top:-20px;
            margin-left:-180px;
            border-right: 2px solid red;
            border-left: 2px solid red;
        }
        .zi1{
            position: relative;
            top: 280px;
        }
        .p3{
            text-align: center;
        }
        .p4{
            text-align: center;
        }
        .inner1{
            position: absolute;
            top: 1670px;
            width: 1100px;
            height: 363px;

        }
        .hui1{
            width: 1099px;
            height: 167px;

        }
        .hui1zuo{
            float: left;

最低0.47元/天解锁文章