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. [Q]打印机页边距设置

    问题描述:当您在使用CAD批量打图精灵默认设置打印图纸(使用pdfFactory虚拟打印机),可能会发现打印出的图纸页边距比您手工打印(使用Adobe或系统打印机)的要偏大. Adobe虚拟打印机打印 ...

  2. django 学习笔记（一）搭建基础环境

    1.安装django 下载地址 https://github.com/django/django 解压后进入文件夹运行指令 >> python setup.py install 2.创建工 ...

  3. SUSElinux的pam模块中$ISA变量的作用

    目的:限制非wheel用户切换至root 方法:vi /etc/pam.d/su文件,增加如下两行 auth sufficient /lib/security/pam_rootok.soauth re ...

  4. Mysql 5.6 解压版配置方案

    # For advice on how to change settings please see # http://dev.mysql.com/doc/refman/5.6/en/server-co ...

  5. CODE[VS]-求和-整数处理-天梯青铜

    题目描述 Description 求n个数的和 输入描述 Input Description 第一行一个整数n 接下来一行n个整数 输出描述 Output Description 所有数的和 样例输入 ...

  6. 在二叉搜索树(BST)中查找第K个大的结点之非递归实现

    一个被广泛使用的面试题: 给定一个二叉搜索树,请找出其中的第K个大的结点. PS:我第一次在面试的时候被问到这个问题而且让我直接在白纸上写的时候,直接蒙圈了,因为没有刷题准备,所以就会有伤害.(面完的 ...

  7. AndroidPullToRefresh拉动效果配置

    最近用了 开源的 AndroidPullToRefresh 库,但是发现拉动时的效果有个很奇怪的地方,无论上下拉动,当列表滚动到顶部或底部时,会瞬间弹出半个列表高度的拉动提示,感觉很不舒服,这种提示根 ...

  8. myeclipse启动服务器时，tomcat出错问题

    启动服务器,错误提示: Launching web on myeclipse tomcat has encountered a problem An internal error occurred d ...

  9. HTML a标签 target属性作用

    特殊的目标 有 4 个保留的目标名称用作特殊的文档重定向操作: _blank 浏览器总在一个新打开.未命名的窗口中载入目标文档. _self 这个目标的值对所有没有指定目标的 <a> 标签 ...

  10. dplyr 数据操作 常用函数（2）

    继上一节常用函数,继续了解其他函数 1.desc() 这个函数和SQL中的排序用法是一样的,表示对数据进行倒序排序. 接下来我们看些例子. a=sample(20,50,rep=T)a desc(a) ...