个人网站页面总结+源码

你的名字 2021-09-16 17:44 321阅读 0赞

网站总体布局及实现内容

头部，内容区，底部

头部：图片 导航栏

内容区：四个内容

1：单一个轮播图

2：鼠标移入图片变色

3：上中下，图片，文字，图片(移入变色)

4：外部引入图片，自己填文字

5：图片文字在一行显示

底部

部分文字居中，部分文字在图片下方，刚刚适应图片大小

头部的制作：

总体设置宽，高自动撑开(这里设置高比较好，应为自动撑开加浮动还要清除浮动)，然后设置位置，

头的左侧左浮，并设置高，

右侧右浮，并设置高，将右边的div全部绝对定位到顶部，这是需要在他的父级设置相对定位

关于导航栏+| 部分，采用ui li a

ul先确定位置，距离上部多少，然后li 因为是快元素，所以要平铺也就是一行，转换为行元素，这时用浮动就可以，

a是|设置 ，border -right,再设置一个边距就可以，这样就把导航和标签分割开了

内容制作：

1：轮播图

1最小宽度：让图片可以放下

2整体框架宽100%，高500，超出部分隐藏，不进行换行，white-space: nowrap;居中显示 相对定位(为箭头做准备)

3：ul 四张图片所以宽200%，高100% ，

4li 宽50%，左浮，居中，高100%

5箭头，长宽，位置，颜色左边左浮，右边右浮（绝对定位）

6下面的图片100%；

鼠标移入图片变色：

所谓的变色就是两张图片跌在一起

大的包裹器给出最大宽度，高度，位置，即可，剩下的就是十张图片

十张图片，设置同样大小的长和宽，间距，

地下五张，利用相对定位，和上面的图片重合，添加标识符，当鼠标移入，改变透明度

上中下，图片文字，移入变色：，

这一部分内容比较丰富，总体来说分为两部分header 和mid

header是一个大得div，下面是两个span标签，在span标签上面是一张图片

地下是移入变色

在包裹器中，设置背景颜色，宽100%，高，居中，这样三个div下的span标签就居中了，然后调节大小和间距就可以了

值得注意的是在选择这，container\_header div:nth cihild(3)选择

变色和上面的一样

外部引入图片，自己填文字

这个环节，在包裹器设置宽，高，然后文字分为两部分，分别用两哥不同的div，在div里面用不同的span标签，想改动某个，用nth-child();

图片文字在一行显示:

这个相对简单，先是图片，再是div下的一个文字一张图片的搭配形式

在包裹器中设置上下的间距，然后居中，=显示

下面是文字图片在一行显示，因为图片会把文字挤到下面，所以给图片设置一个margin-bottom=-5，使其对齐即可

底部

部分文字居中，部分文字在图片下方，刚刚适应图片大小

大的设置颜色字体，下一级设置位置

js部分就是一个轮播图：

用到了淡入淡出

自动：淡入淡出

手动：点击事件

`$(document).ready(function (){})`

`当DOM文档对象模型，已经加载并且包括页面已经完全加载，会执行ready事件`

`自动的淡入淡出，首先让当前的出现，剩下的兄弟消失，$('.ig').eq(0).show().siblings().hide();`

`timer();`

然后写show函数

function show()\{

$('.ig').eq(i).fadeIn(300).siblings().fadeOut(300);

然后再加一个定时器

function timer ()\{

time = setInterval(function()\{

if(i==4)\{

i=0;

\}.1000)

html部分

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>大家好</title>
        <link rel="stylesheet" href="./css/desi.css">
        
        <script src="js/jquery-3.2.1.min.js"></script>
        <script src="js/index.js"></script>
    </head>
    <body>
    <div class="wrap">
        <div class="header">
            <div class="header_left">
                
            </div>
            <div class="header_right">
                <div class="number">
                    <img src="./img/number.jpg" alt="">
                </div>
                <ul>
                    <li><a href="#">首页</a></li>
                    <li class="show_list"><a href="#">
                        <span>成功案例</span>
                        <ul class="move_list">
                            <li>品牌设计</li>
                            <li>网页设计</li>
                            <li>平面设计</li>
                            <li>电子商城</li>
                            <li>空间/建筑</li>
                        </ul>
                    </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>
        <div class="banner">
            <div class="banner_wrap">
                <ul class="banner_img clear-fix">
                    <li class="ig"><img src="./img/banner_one.jpg" alt=""></li>
                    <li class="ig"><img src="./img/banner_4.png" alt=""></li>
                    <li class="ig"><img src="./img/banner_four.png" alt=""></li>
                    <li class="ig"><img src="./img/banner_6.png" alt=""></li>
                </ul>
                <div class="left_btn">
                    <img src="./img/向左.png" alt="">
                </div>
                <div class="right_btn">
                    <img src="./img/向右.png" alt="">
                </div>
            </div>
        </div>
        <div class="container">
            <div class="content_one">
                <img src="./img/design2.png" alt="">
                <img src="./img/design3.png" alt="">
    
                <img src="./img/design5.png" alt="">
    
                <img src="./img/design7.png" alt="">
    
                <img src="./img/design9.png" alt="">
    
                <img src="./img/design.png" alt="" class="white_img">
    
                <img src="./img/design4.png" alt="" class="white_img">
    
                <img src="./img/design6.png" alt="" class="white_img">
                <img src="./img/design8.png" alt="" class="white_img">
                <img src="./img/design10.png" alt="" class="white_img">
            </div>
            <div class="content_two">
                <div class="content_header">
                    <img src="./img/exhib.png" alt="">
                    <div>
                        <span style="font-weight: bold">服务项目:</span>
                        <span>标志设计；LOGO设计；商标设计；VI设计；画册设计；海报设计；地产宣传；户外广告；包装设计；ICON设计；</span>
                    </div>
                    <div>
                        <span>网页设计；模板建站；定制网站；界面设计；H5页面设计；网店装修；CAD效果图……</span>
                    </div>
                </div>
                <div class="mid">
                    <img src="./img/mid1.png" alt="">
                    <img src="./img/mid2.png" alt="">
                    <img src="./img/mid3.png" alt="">
                    <img src="./img/mid4.png" alt="">
                    <img src="./img/mid5.png" alt="">
                    <img src="./img/mid6.png" alt="" class="bottom_img">
                    <img src="./img/mid7.png" alt="" class="bottom_img">
                    <img src="./img/mid8.png" alt="" class="bottom_img">
                    <img src="./img/mid9.png" alt="" class="bottom_img">
                    <img src="./img/mid10.png" alt="" class="bottom_img">
    
    
                </div>
            </div>
            <div class="content_three">
                <div class="three_wrap">
                    <div class="top_text">
                        <span>我们秉承“工匠精神”，做最精致的设计</span>
                        <span>
    
    我们是完美主义者，要求自己的每一次设计都是最完美。我们坚持专业高水准的服务标准，致力成为您的事业伙伴，我们珍重并以真诚回报您给予的信任和期待，
                         </span>
                        <span>
                             因为我们的价值来自于我们协助您创造价值。
                            </span>
                    </div>
                    <div class="bottom_text">
                        <span>我们敢比服务</span>
                        <span>所有的服务项目一律满意为止</span>
                        <span>我们敢比价格</span>
                        <span>我们是以工作室的方式运作，我们的设计作品不包含公司运作成本，</span>
                        <span>我们只会索要单纯的设计价值</span>
                    </div>
                </div>
            </div>
            <div class="content_four">
                <div class="four_wrap">
                    <img src="./img/service.png" alt="">
    
                    <div>
                        <img src="./img/tele.png" alt="">
                        <span> 项目洽谈</span>
                        <img src="./img/qq.gif" alt="">
                        <span> ,根据需求报价 </span>
                        <img src="./img/price.png" alt="">
                        <span>预付定金，开始设计</span>
                        <img src="./img/four.png" alt="">
                        <span>修改定稿，完成设计</span>
                        <img src="./img/receive.png" alt="">
                        <span>改定稿，完成设计</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="footer_wrap">
                <img src="./img/二维码.jpg" alt="">
                <div class="footer_text">
                    <span>xx省XX市XX区xx路xx街道xx号 </span>
                    <span>©</span>
                    <span>2017.11-2018.10</span>
    
                    <span>扫一扫，直接沟通设计师</span>
                </div>
            </div>
        </div>
    </div>
    </body>
    </html>

css部分：

* {
        padding: 0;
        margin: 0;
    }
    
    li {
        list-style: none;
    }
    
    a {
        text-decoration: none;
    }
    
    
    
    .header {
        /*height: 120px;*/
        width: 1048px;
        margin: 0 auto;
        position: relative;
    
    }
    
    .header_left {
        line-height: 120px;
        float: left;
    
    }
    
    .header_right {
        height: 120px;
        float: right;
    }
    
    .header_right > div {
        position: absolute;
        top: 0;
        right: 0;
    }
    
    .header_right ul {
        margin-top: 82px;
    
    }
    
    .header_right ul li {
        float: left;
        line-height: 13px;
    }
    
    .header_right ul li a {
        border-right: 2px solid black;
        padding: 0 25px;
        /*height: 13px;*/
        font-weight: bold;
        color: #666;
    
    }
    
    .header_right ul li a:hover {
        color: #909090;
    }
    
    .header_right ul li:last-child a {
        border: none;
    }
    
    .banner {
        min-width: 1048px;
    }
    
    .banner_wrap {
        overflow: hidden;
        white-space: nowrap;
        width: 100%;
        height: 500px;
        position: relative;
    }
    
    .banner_img {
        height: 100%;
        width: 200%;
        margin: 0 auto;
        /*position: relative;*/
    
    }
    
    .banner_img li {
        float: left;
        width: 50%;
        height: 100%;
        margin: 0 auto;
        /*position: absolute;*/
    }
    
    .banner_img li img {
        width: 100%;
        height: 100%;
    }
    
    .clear-fix {
        content: '';
        clear: both;
        display: block;
        overflow: hidden;
    }
    
    .left_btn {
        background: #999;
        width: 71px;
        height: 71px;
        top: 50%;
        left: 65px;
        position: absolute;
        cursor: pointer;
    
    }
    
    .left_btn img {
        width: 100%;
        height: 100%;
    }
    
    .right_btn {
        background: #999;
        width: 71px;
        height: 71px;
        top: 50%;
        right: 65px;
        cursor: pointer;
        position: absolute;
    
    }
    
    .right_btn img {
        width: 100%;
        height: 100%;
    }
    
    .content_one {
        max-width: 1048px;
        margin: 0 auto;
        height: 260px;
    }
    
    .content_one img {
        width: 180px;
        height: 130px;
        padding: 60px 10px;
    }
    
    .white_img {
        position: relative;
        bottom: 255px;
        opacity: 0;
    }
    
    .white_img:hover {
        opacity: 1;
        /*transform: rotate(45deg) scale(1.5);*/
    }
    
    .content_two {
        width: 100%;
        text-align: center;
        background: gainsboro;
        height: 609px;
    
    }
    
    .content_header {
        margin: 0 auto;
    }
    
    .content_header div:nth-child(1) {
        margin-top: 20px;
    
        /*margin-bottom: px;*/
    
    }
    
    .content_header div:nth-child(3) {
        padding-top: 10px;
        padding-bottom: 40px;
    }
    
    /*一个span标签是一个孩子？*/
    
    .content_header div span {
        color: #666;
        font-size: 13px;
    }
    
    .mid {
        max-width: 1060px;
        margin: 0 auto;
    }
    
    .mid img {
    
        padding: 5px 5px 40px 5px;
    }
    
    .mid .bottom_img {
        position: relative;
        bottom: 375px;
    }
    
    .mid .bottom_img:hover {
        opacity: 0;
    }
    
    .content_three {
        width: 100%;
        height: 500px;
        background: url("../img/content_three.png") no-repeat;
        background-position: center center;
    }
    
    .three_wrap {
        padding-top: 138px;
    
        text-align: center;
    }
    
    .top_text span:nth-child(1) {
        font-size: 16px;
    }
    
    .top_text span, .bottom_text span {
        color: #666;
        font-family: 微软雅黑;
        display: block;
        font-size: 13px;
        /*letter-spacing: 1px;*/
        font-size: 2px 0;
    }
    
    .three_wrap div:nth-child(2) {
        margin-top: 50px;
    }
    
    .bottom_text span:first-child {
        color: #000;
        font-size: 18px;
        font-family: SimSun;
        font-weight: bold;
        padding: 5px 0;
    }
    
    .bottom_text span:nth-child(3) {
        color: #000;
        font-size: 20px;
        font-family: SimSun;
        font-weight: bold;
        padding: 5px 0;
    }
    
    .four_wrap {
        padding-top: 20px;
        text-align: center;
        margin-bottom: 80px;
    }
    
    .four_wrap img {
        margin-bottom: 40px;
    }
    
    .four_wrap > div img {
        margin-bottom: -5px;
    }
    
    .footer {
        background: #333;
        color: #fff;
    
    }
    
    .footer_wrap img {
        width: 150px;
        height: 150px;
        margin-right: 250px;
    }
    
    .footer_wrap {
        padding: 65px 0 40px;
        text-align: right;
        margin: 0 auto;
    }
    
    .footer_wrap span {
        color: #999;
        font-family: SimSun;
        font-size: 13px;
    
    }
    
    .footer_wrap span:last-child {
        font-size: 14px;
        color: #fff;
        margin: 0 250px;
    }
    
    .footer_wrap span:nth-child(2) {
        margin: 0 5px;
    }
    
    .footer_wrap span:nth-child(4) {
        margin: 0 5px;
    
    }
    
    .show_list {
        position: relative;
    
    }
    
    .show_list .move_list {
        z-index: 100;
        position: absolute;
        top: -56px;
        left: 0;
        width: 100%;
        background: #333;
        text-align: center;
    
        display: none;
    }
    .show_list .move_list li {
        padding: 10px 0;
        width: 114px;
        color: #fff;
    }
    .header_right ul a .show_list {
        padding-bottom: 20px;
        border-right: none;
    }
    
    
    
    .show_list:hover .move_list {
        display: block;
    }
    
    /*.show_list .move_list ul li:nth-child(3) {*/
        /*border-left: 1px solid #000;*/
    /*}*/
    
    .show_list .move_list li:hover {
        background: orange;
        color: #fff;
    }
    
    js部分：