第九十三节，html5+css3移动手机端流体布局，基础CSS,头部设计,轮播设计,底部设计...

html5+css3移动手机端流体布局，基础CSS,头部设计,轮播设计,底部设计

基础CSS

首先将通用css属性写好

@charset "utf-8";
/*通用样式*/
/*去除所有元素的内外边距*/
*{margin: 0;padding: 0;
}
/*去除所有ul里li的小圆点*/
ul{list-style-type: none;
}
/*去除所有a的下划线*/
a{text-decoration: none;
}
/*将图片转换成区块，将图片最大宽度设置成100%,使图片自适应*/
img{display: block;max-width: 100%;
}
/*通用样式结束*/

头部设计

我们用新单位rem就是以根元素挂钩来计算大小，首先将根元素字体设置成16px作为基准

html{font-size: 16px;
}

这后面的单位就以这基准的rem就是倍数来计算，区块宽度基本用max-width最大宽度设定和百分比来设置，这样小于这个宽度的也能自适应

宽度设置，与rem单位计算

注意：手机网站，手机屏幕尺寸不一样，宽度不能做绝对宽度，只能用最大宽度和百分比来做，

rem是与根元素挂钩的，我们的根元素字体设置成16px作为基准，

页面最大宽度为640像素

所以我们设置导航的最大宽度为40ren，换算方式是要设置的宽度像素除以根基准像素，得出的就是rem的单位，（640除以16=40），所以导航的最大宽度设置为40rem也就是640像素

导航高度设置45像素

就是45除以根基准，（45除以16=2.8125）我们就设置成2.8rem

单位计算

要设置的像素除以根基准=rem单位

rem单位乘以根基准=像素

换算子元素宽度站父元素宽度的百分之几，子元素宽度除以父元素宽度=子元素宽度站父元素宽度的百分之几

将子元素宽度站父元素宽度的百分之几换算成像素，父元素的宽度乘以子元素宽度的百分之几=子元素的像素

完成效果：

html代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--自适应手机，禁止缩放--><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>瓢城旅行社</title><link rel="stylesheet" href="css/index.css"></head>
<body><!--头部导航-->
<header id="dao-hang"><div class="dao-hang2"><h1>瓢城旅行社</h1><nav><h2>网站导航</h2><ul><li class="dao-hang-lie-biao shou"><h3><a href="index.html">首页</a></h3></li><li class="dao-hang-lie-biao"><h3><a href="#">资讯</a></h3></li><li class="dao-hang-lie-biao"><h3><a href="#">机票</a></h3></li><li class="dao-hang-lie-biao"><h3><a href="#">关于</a></h3></li></ul></nav></div>
</header>
<!--图片轮播-->
<div class="lun-bo"><img src="img/adver.png">
</div>
<!--搜索-->
<div class="sou-su"><input type="text"><button>搜索</button>
</div><!--尾部-->
<footer class="wei-bu"><div class="wei-bu2"><p>客户端 | 触屏版 | 电脑版</p></div><div class="wei-bu3"><P>Copyright © YCKU 瓢城旅行社 | 苏ICP备120110119号 </P></div>
</footer></body>
</html>

css代码

@charset "utf-8";
/*通用样式*/
/*去除所有元素的内外边距*/
html{font-size: 16px;
}
/*设置字体*/
body{font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif;
}
*{margin: 0;padding: 0;
}
/*去除所有ul里li的小圆点*/
ul{list-style-type: none;
}
/*去除所有a的下划线*/
a{text-decoration: none;
}
/*将图片转换成区块，将图片最大宽度设置成100%,使图片自适应*/
img{display: block;max-width: 100%;
}
/*将边框算在元素尺寸内*/
div{box-sizing: border-box;
}
/*通用样式结束*//*头部导航*/
#dao-hang .dao-hang2{width: 100%;height: 2.8rem;background-color: #333333;
}
#dao-hang .dao-hang2 h1{display: none;
}
#dao-hang .dao-hang2 h2{display: none;
}
#dao-hang .dao-hang2 ul{max-width: 40rem;height: 2.8rem;margin: 0 auto;color: #FFFFFF;
}
#dao-hang .dao-hang2 ul li{width: 25%;height: 2.8rem;float: left;line-height: 2.8rem;text-align: center;font-size: 15px;
}
#dao-hang .dao-hang2 ul li a{display: block;width: 100%;height: 2.8rem;color: #FFFFFF;font-weight: normal;
}
#dao-hang .dao-hang2 ul li a:hover, #dao-hang .dao-hang2 .shou{background-color: #000000;
}
/*图片轮播*/
.lun-bo{max-width: 40rem;max-height: 12.5rem;background-color: #3835ff;margin: 0 auto;
}
/*搜索*/
.sou-su{max-width: 40rem;height: 2.5rem;background-color: #DCE1E7;margin: 0 auto;padding: 7px 0 0 0;position: relative;
}
.sou-su input{width: 87%;height: 26px;display: block;margin: 0 auto;border: 1px solid #5F89C4;border-radius: 6px;position: relative;outline: none;
}
.sou-su button{display: block;width: 50px;height: 26px;border-radius: 0 6px 6px 0;position: absolute;top: 8px;right: 6.2%;border: none;background-color: #5F89C4;outline: none;cursor: pointer;
}/*尾部*/
.wei-bu{max-width: 40rem;;min-height: 69px;margin: 0 auto;background-color: #333333;color: #6F6F6F;text-align: center;
}
.wei-bu .wei-bu2{width: 100%;height: 34px;line-height: 34px;font-size: 17px;
}
.wei-bu .wei-bu3{width: 100%;font-size: 17px;
}

转载于:https://www.cnblogs.com/adc8868/p/6003527.html

第九十三节，html5+css3移动手机端流体布局，基础CSS,头部设计,轮播设计,底部设计...相关推荐

html5电子杂志页面案例,html5电子杂志支持手机端触屏滑动翻书效果
特效描述:html5电子杂志支持手机端触屏滑动翻书效果.html5手机电子杂志,触屏滑动电子杂志翻书动画特效代码结构 1. 引入JS 2. HTML代码 function loadApp() ...
（淘宝无限适配）移动手机端rem布局详解（转载非原创）
https://www.cnblogs.com/well-nice/p/5509589.html (淘宝无限适配)手机端rem布局详解(转载非原创) 从网易与淘宝的font-size思考前端设计稿与工 ...
前端切图:手机端自适应布局demo
手机端自适应布局demo 原型如下: 图片发自简书App 要求如下:适应各种机型源码如下: <!DOCTYPE html > <html><head><met ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <! ...
css3模板替换php,将ECSHOP的首页主广告轮播替换为CSS+JS,最模板方法一(2)
3.打开index.php,在大约164行找到 $smarty->display('index.dwt', $cache_id); 在此行下面插入 function get_flash_xml( ...
html自动弹出提示对话框代码,html5简单的手机端弹出对话框确认代码
特效描述:html5手机端弹出对话框确认.html5手机端弹出对话框代码结构 1. 引入JS 2. HTML代码没有传递任何参数(需手动关闭) 弹出一个不带任何按钮,且是警告的框,并且两秒后自动 ...
HTML5+CSS3之快速入门 day6-day10布局，表单，css精灵，css hack，BFC规范
day06 布局核心: 盒模型(间距) 浮动 (并排) 定位 (覆盖+ 特殊位置) 定位类型position 静态定位 position:static; 默认值静态定位不能使盒子位置变化不适合布局 ...
html图片手机端不清楚,HTML+CSS图片大小自适应~PC电脑端、手机端
写页面的时候经常会遇到需要图片自适应容器大小这样的情况: div{width:400px;height:400px;border:1px solid #000; } img{width:100%; ...
html5+css3+jquery完成响应式布局
文章出处:https://www.cnblogs.com/jqstudy/p/6213358.html 响应式布局,流体布局,自适应布局,静态布局等等,这是移动设备的飞速发展,前端人员不得不跟上潮流的 ...

第九十三节，html5+css3移动手机端流体布局，基础CSS,头部设计,轮播设计,底部设计...

第九十三节，html5+css3移动手机端流体布局，基础CSS,头部设计,轮播设计,底部设计...相关推荐

最新文章

热门文章