个人网站页面总结+源码

网站总体布局及实现内容

头部，内容区，底部

头部：图片导航栏

内容区：四个内容

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="https://code.jquery.com/jquery-3.0.0.min.js"></script>--><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"><!--<img src="./img/logo.png" alt="">--></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部分：

var i = 0;
var time;
$(document).ready(function () {$('.ig').eq(0).show().siblings().hide();timer();$('.left_btn').click(function () {clearInterval(time);if (i == 0) {i = 4;}i--;show();timer();})$('.right_btn').click(function () {clearInterval(time);if (i == 3) {i = -1;}i++;show();timer();})
})function timer() {time = setInterval(function () {show();i++;if (i == 4) {i = 0}}, 1000)
}function show() {$('.ig').eq(i).fadeIn(300).siblings().fadeOut(300);}

个人网站页面总结+源码相关推荐

php网站页面显示源码,用PHP显示网站的源代码
PHP是一种服务器端脚本语言,可为网页提供动态内容.它为网页构建源代码,然后由浏览器对其进行解析以呈现该网页.但是我们也可以在本文中找到使用PHP的网页的源代码.我们将学习如何使用PHP显示网站的源代 ...
关于美食商城HTML网页设计-----在线美食订餐网站html模板源码30个页面(功能齐全) html+css+javascript网页设计实例企业网站制作...
关于美食商城HTML网页设计-----在线美食订餐网站html模板源码30个页面(功能齐全) html+css+javascript网页设计实例企业网站制作临近期末, 你还在为HTML网页设计结课 ...
简洁大气带进度条的URL跳转页面HTML源码
简介: 简洁大气带进度条的URL跳转页面HTML源码可用于网站内链接跳转,或者广告链接跳转网盘下载地址: http://nb8.net/smTgTV0QtPF0 图片:
520表白网站（附源码与修改教程）
520网站(附源码与修改教程) 一.前言二.作品简介三.表白小网站的修改四.总结及其获取方式一.前言马上520了,有男朋友或者女朋友的小伙伴呢,可能又带来一个烦恼了,又是一个烦人的520,我 ...
原生前端实现响应式个人简历网站设计(附源码)
目录网站站点所用技术实现功能视频展示源码网站站点胜烨的个人网站所用技术 HTML css JavaScript 实现功能响应式界面设计捕捉用户操作明暗模式服务器部署视频展示 ...
html简洁风格的个人博客网站模板（源码）
文章目录 1.设计来源 1.1 博客首界面 1.2 个人简介界面 1.3 日常记录界面 1.4 文章列表界面 1.5 文章信息界面 2.结构源码 2.1 目录结构 2.2 源代码源码下载作者:xc ...
画廊php网站,美术画室画廊艺术设计网站整站源码 v5.7sp1
美术画室画廊艺术设计网站整站源码简介这是一款织梦v5.7sp1开源的画廊艺术设计网站的整站源码,源码包内包含详细的安装说明,可以让初学者,也可以快速的安装,安装好的网站内有一些演示数据可以让使用的人 ...
基于ASP.NET的精美企业网站后台管理系统源码
ASP.NET精美企业网站后台管理系统源码源码类型:全开源免费分享,需要源码学习可私信. 很不错的企业网站后台源码,功能齐全,非常适合二次开发和企业应用. 一.前台页面: 1.网站首页 2.关于公司 ...
用php写的亲亲鲜花网站_PHP最新鲜花礼品商城网站整站源码(自适应手机端) 鲜花商城dedecms模板源码...
资源描述 PHP最新鲜花礼品商城网站整站源码(自适应手机端) 鲜花商城dedecms模板源码模板介绍: 织梦最新内核开发的模板,该模板属于鲜花网.鲜花商城类企业都可使用! 这款模板使用范围极广,不仅 ...

个人网站页面总结+源码

个人网站页面总结+源码相关推荐

最新文章

热门文章