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

基础CSS

首先将通用css属性写好

@charset "utf-8";

/*通用样式*/

/*去除所有元素的内外边距*/

*{

    margin:;

    padding:;

}

/*去除所有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:;

    padding:;

}

/*去除所有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;

}

第九十三节，html5+css3移动手机端流体布局，基础CSS,头部设计,轮播设计,底部设计的更多相关文章

  1. 第九十二节，html5+css3移动手机端流体布局，开篇知识

    html5+css3移动手机端流体布局,开篇知识 将项目设计成移动端可访问的页面,项目采用的是流体布局.也就是宽度以百分比自适应的,因为手机的屏幕大小不一致  一．整体设计     首先 我们要了解一 ...

  2. 第九十四节，html5+css3移动手机端流体布局，旅游部分，媒体查询

    html5+css3移动手机端流体布局,旅游部分,媒体查询 媒体查询 媒体查询是手机网站和自适应网站的重要部分,媒体查询可以根据不同的屏幕大小,做响应的处理,如文字的大小,区块隐藏等等 媒体查询,这里 ...

  3. 前端切图:手机端自适应布局demo

    手机端自适应布局demo原型如下: 图片发自简书App 要求如下:适应各种机型源码如下: <!DOCTYPE html > <html> <head> <me ...

  4. html5+css3+jquery完成响应式布局

    响应式布局,流体布局,自适应布局,静态布局等等,这是移动设备的飞速发展,前端人员不得不跟上潮流的一个方向.实际上各种设备尺寸,分辨率大都不同,真的适应各种设备依旧是不现实的,首先是浏览器差异化,让我们 ...

  5. （淘宝无限适配）手机端rem布局详解（转载非原创）

    从网易与淘宝的font-size思考前端设计稿与工作流 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问 ...

  6. （淘宝无限适配）手机端rem布局详解

    从网易与淘宝的font-size思考前端设计稿与工作流 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问 ...

  7. CSS3弹性盒模型flexbox布局基础版

    原文链接:http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提 ...

  8. 第八十三节，CSS3动画效果

    CSS3动画效果 学习要点: 1.动画简介 2.属性详解 3.简写和版本 本章主要探讨HTML5中CSS3的动画效果,可以通过类 Flash那样的关键帧模式控制运行. 一．动画简介     CSS3提 ...

  9. HTML5/CSS3 第三章页面布局

    页面布局 1 页面组成 2 布局相关的标签 <div></div> 定义文档中的分区或节 <span></span> 这是一个行内元素,没有任何意义 & ...

随机推荐

  1. USACO 3.4 Electric Fence

    Electric FenceDon Piele In this problem, `lattice points' in the plane are points with integer coord ...

  2. 递归思路分解（C#）

    例子一:求1!+2!+......+X! 思路分解:因为是用递归思想解决问题,也就是方法调用方法.那么肯定的方法是重复利用的.在这道题里,我们要重复利用的也就是求X!和求和 所以我们先把求X!的代码写 ...

  3. Jmeter之录制脚本

    目前,思路:先录制→再压测. [一]录制的准备: 第一种:直接的模板(¬_¬) [1]File→Templates [2]看见Select Template→Recording→create [3]好 ...

  4. android 控件ui

    公共参数: android:id="@+id/text_view"  给当前控件定义了 一个唯一标识符如:text_view android:layout_width=" ...

  5. hibernate子查询

    对于支持子查询的数据库,Hibernate支持在查询中使用子查询.一个子查询必须被圆括号包围起来(经常是SQL聚集函数的圆括号). 甚至相互关联的子查询(引用到外部查询中的别名的子查询)也是允许的. ...

  6. 在虚拟机上配置linux lab的相关经验

    最近一直在研究怎样在嵌入式开发板上移植linux嵌入式系统,但是不太想花费太多钱购买开发板.然后在网上搜索相关的arm模拟器.有qemu,skyeye,armulator等,在按照网上教程一步一步实践 ...

  7. matlab中选择图片路径

    %读取训练图片数据文件 [FileName,PathName] = uigetfile('*.*','选择测试图片数据文件t10k-images.idx3-ubyte'); %暴露图片路径 saved ...

  8. IntelliJ IDEA “Finds duplicated code”提示如何关闭

    发现重复的代码这个提示真的很烦啊,我们怎么关闭他呢. 设置在这里: Settings -> Editor -> Inspections -> General -> Duplic ...

  9. ES 6 : 数组的扩展

    1.Array.from() Array.from方法用于将两类对象转为真正的数组:类似数组的对象和可遍历(iterable)对象. 下面是一个类似数组的对象,Array.from将它转为真正的数组. ...

  10. hdu 3669 Cross the Wall(斜率优化DP)

    题目连接:hdu 3669 Cross the Wall 题意: 现在有一面无限大的墙,现在有n个人,每个人都能看成一个矩形,宽是w,高是h,现在这n个人要通过这面墙,现在只能让你挖k个洞,每个洞不能 ...