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. D3.js：完整的柱形图

    一个完整的柱形图包含三部分:矩形.文字.坐标轴.本章将对前几章的内容进行综合的运用,制作一个实用的柱形图,内容包括:选择集.数据绑定.比例尺.坐标轴等内容. (1) 添加SVG画布 //画布大小 va ...

  2. Ubuntu中Qt新建窗体提示lGL错误

    提示错误: cannot find -lGL collect2:error:ld returned 1 exit status 这是因为系统缺少链接库,终端输入: sudo apt-get insta ...

  3. PyQt5+python3+pycharm开发环境配置

    1.下载PyQt https://sourceforge.net/projects/pyqt/files/PyQt5/PyQt-5.6/PyQt5-5.6-gpl-Py3.5-Qt5.6.0-x32- ...

  4. Spring in Action --- 使用MockMvc时报异常

    今天在学习spring时模仿了书上的代码编写基于mockmvc的测试用例,但是运行时报 Error:(8, 8) java: 无法访问javax.servlet.ServletException   ...

  5. 一点公益二码公益开发模式系统源码App

    写这篇文章,是因为最近看到的一个著名的开源项目在内部使用时的各种问题,不得不说,很多的开源的东西思想是不错的,但离真正工程化都有不小的距离,所以没什么商业公司采用的开源产品如果要引入的话一定要慎重,通 ...

  6. 给RelativeLayout设置背景，无效果bug解决

    drawable文件夹下面 tomyshop_selector.xml文件 <?xml version="1.0" encoding="utf-8"?&g ...

  7. Java错误提示is not an enclosing class

    今天脑袋晕乎乎的,犯了个低级错误,好半天才反应过来 一直提示:is not an enclosing class 我居然把 RegisterActivity.class 写成了 RegisterAct ...

  8. uoj 55 紫荆花之恋 动态点分治+替罪羊式重构+treap

    每插入一个点,直接把它当做重心插入原树,当做是动态点分树一样维护 但这样深度会越来越大,所以我们用类似替罪羊的方法 当树失去平衡时,对子树进行一次点分,保证复杂度 #include <cstdi ...

  9. GrowingIO 2016 数据驱动增长大会—— 一起做增长英雄

    GrowingIO 2016 数据驱动增长大会,首次聚齐了增长黑客之父 Sean Ellis .世界前十位前沿数据科学家张溪梦等数十位中美顶尖增长实践者: 链家.点融网.Camera360.量化派.北 ...

  10. magento获取一些值的方法函数

    1显示产品列表页(列表.PHTML).echo $this->getProductListHtml(); 2.得到你的Magento的页面的路径.  echo $this->getUrl( ...