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. 蓝桥杯 C语言 入门训练 序列求和

    问题描述 求1+2+3+...+n的值. 输入格式 输入包括一个整数n. 输出格式 输出一行,包括一个整数,表示1+2+3+...+n的值. 样例输入 4 样例输出 10 样例输入 100 说明:有一 ...

  2. 详解一下网络广告cpc、cpm、cpl、cpa、cps、cpr的计费方法是什么

    CPC(Cost per click)按照 广告 点击数 计费 ,限定一个IP在24小时内只能点击一次.CPM(Cost per mille)按照广告显示次数来计算广告费,可在短时间内为 网站 带来巨 ...

  3. Python学习懒出极致——自备常用链接

    linux: samba配置:http://blog.chinaunix.net/uid-23069658-id-3142052.html ubuntu: mysql启停:http://www.2ct ...

  4. AngularJSLiveLessons

    https://www.youtube.com/watch?v=8P4K6NCFtJ8&feature=youtu.be&list=PLzpMMGE0rxPkenSURlthkctgK ...

  5. ios_swift开发资源整理

    目录 1.苹果官方资源 2.国内外视频网站推荐 3.中文文档 4.demo网站 5.开发工具推荐 6.国内外开发网站论坛 7.技术博客推荐 8.书籍推荐 9.第三方框架推荐 10.第三方发布平台 11 ...

  6. vc++项目 : error PRJ0002 : 错误的结果 1 (从“C:\Program Files\Microsoft SDKs\Windows\v6.0A\bin\rc.exe”返回)。

    右击工程->属性->配置属性->清单工具->输入和输出->嵌入清单,把是改成否

  7. moodle其他搜集

    1.将面包屑的符号换成">>",找到皮肤包里的config.php文件,在最后加入 $THEME->rarrow=">&gt"; ...

  8. 编写CodeMirror Modes详解

    在写新的模式(mode)之前,还是先来概括一下CodeMirror的设计思路.CodeMirror分为三部分:核心,模式,扩展.核心库对外开放了很多接口,而这些接口就是实现新模式或者新扩展的基石. 在 ...

  9. <密码的实现>输入密码的时候，显示“*”，而不是显示输入内容

    一开始还以为用C语言和C++不能实现输入密码的时候显示出“*”而不显示输入的内容呢!没想到偶然的机会试出了用while循环结构可以实现.以下是我整理的C语言和C++的代码,供初学者参考. 这是C语言实 ...

  10. Tiny64140之初始化时钟

    简介: Tiny6410 时钟逻辑为整个芯片提供了3种时钟分别为FCLK.HCLK.PCLK有三个PLL 分别为APLL.MPLL.EPLL.   APLL 专用于CPU   MPLL 供AHB(存储 ...