* {
box-sizing: border-box;
}
/*box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素*/
body {
font: Arial;
margin:;
}
.header {
padding: 80px;
text-align: center;
background: burlywood;
color: white;
}
.header h1 {
font-size: 40px;
}
/*导航*/
.navbar {
overflow: hidden;/*规定当内容已出发生的事情*/
background-color: #333;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;/*设置内边距*/
text-decoration: none;
}
/*设置右边的链接*/
.navbar a.right {
float: right;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
/*列容器*/
.row {
display: -ms-flexbox;/*规定属性应该生成框的类型,-ms混合版弹性布局*/
display: flex;/*布局,指定这个框的布局是flex类型,弹性布局*/
-ms-flex-wrap: wrap;/*让弹性盒在必要的时候拆行*/
flex-wrap: wrap;
}
/*创建两个列*/
/*边栏*/
.side {
-ms-flex: 30%;
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}
/*主要内容区域*/
.main {
-ms-flex: 70%;
flex: 70%;
background-color: white;
padding: 20px;
}
/*测试图片*/
.fakeimg {/*冒充的,伪造的,填充*/
background-color: #aaa;
width: 100%;/*宽度*/
padding: 20px;
}
/*底部*/
.footer {/*页脚*/
padding: 20px;
text-align: center;
background: #ddd;
}
/*响应式布局 - 在屏幕设备宽度尺寸小于 700px 时,让两栏上下堆叠显示*/
@media screen and (max-width: 700px) {/*在设置响应式的页面时需要的多些*/
.row {
flex-direction: column;
}
}
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}

css样式实例的更多相关文章

  1. jQuery CSS()方法改变CSS样式实例解析

    转自:http://www.jbxue.com/article/24588.html 分享一个jQuery入门实例:使用CSS()方法改变现有的CSS样式表,css()方法在使用上具有多样性.其中有一 ...

  2. 每天一个JavaScript实例-展示设置和获取CSS样式设置

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. css美化Div边框的样式实例*(转载)

    css美化Div边框的样式实例   很多时候如果不是用了很多样式,很难把边框修饰得好看,看了一篇博文,觉得真的挺漂亮,也挺好看. 转载的博文地址 将这段美化的css代码 border:1px soli ...

  4. Django 小实例S1 简易学生选课管理系统 12 CSS样式完善

    Django 小实例S1 简易学生选课管理系统 第12节--CSS样式完善 点击查看教程总目录 作者自我介绍:b站小UP主,时常直播编程+红警三,python1对1辅导老师. 课程模块的逻辑代码到这里 ...

  5. Django 小实例S1 简易学生选课管理系统 8 CSS样式优化

    Django 小实例S1 简易学生选课管理系统 第8节--CSS样式优化 点击查看教程总目录 作者自我介绍:b站小UP主,时常直播编程+红警三,python1对1辅导老师. 前面的几节下来,用户模块基 ...

  6. css样式 --- CSS hack

    前端样式,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道一 ...

  7. js之如何获取css样式

    js之如何获取css样式   一.获取内联样式 1 <div id ="myDiv" style="width:100px;height:100px; border ...

  8. HTML 学习笔记 CSS样式(字体)

    css字体属性定义文本的字体系列 大小 加粗 风格 和 变形(如小型大写字母(类似于大写字母字体变小了)) css字体系列 在css中 有两种不同类型的字体系列名称 1.通用字体系列 - 拥有相似外观 ...

  9. 谷歌浏览器 查看源码里的a:hover CSS样式 还有火狐的查看方式

    谷歌浏览器查看hover css样式 直接实例: 选中a标签 然后右侧面板 出现 箭头 点击 出现Toggle Element state提示 下面再hover前打勾 直接就可以显示效果了 浏览器查看 ...

随机推荐

  1. EL表达式无效问题

    引起原因web.xml中: <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3// ...

  2. xwiki使用中的问题

    xwiki 内存限制 问题重现: xwiki启动后内存.cpu一直上涨,不回落,启动后服务访问速度越来越慢,最后无法访问 分析: xwiki在启动时会消耗大量内存和cpu,增加tomcat最大内存限制 ...

  3. Tire(字典树)

    Tire 字典树,又称为单词查找树,Tire 树,是一种树形结构,它是哈希树的变种. 实现原理: 字典树与字典很相似,当要查一个单词是不是在字典树中,首先看单词的第一个字母是不是在字典的第一层,如果不 ...

  4. C_clock()测试代码(循环)运行时间

    clock()  传送门(百度百科) clock()是C/C++中的计时函数,而与其相关的数据类型是clock_t.在MSDN中,查得对clock函数定义如下:   clock_t clock(voi ...

  5. [CTS2019]氪金手游

    [CTS2019]氪金手游 各种情况加在一起 先考虑弱化版:外向树,wi确定 i合法的概率就是wi/sw sw表示子树的w的和,和子树外情况无关 这些概率乘起来就是最终合法的概率 如果都是外向树, f ...

  6. JS给XMLHttpRequest添加filter

    function XMLHttpRequestFilter(){ let base = XMLHttpRequest.prototype.open; let filter_list = []; let ...

  7. LeetCode75----分类颜色(变相快排)

    给定一个包含红色.白色和蓝色,一共 n 个元素的数组,原地对它们进行排序,使得相同颜色的元素相邻,并按照红色.白色.蓝色顺序排列. 此题中,我们使用整数 0. 1 和 2 分别表示红色.白色和蓝色. ...

  8. VSCode安装go语言开发环境,go插件问题解决

    在安装go插件时,会自动更新很多依赖库文件,都是从Github更新下来,但是因为Github的文件中,多有应用go官网中的文件,导致,因为网络缘故,不能直接下载,导致安装失败,如下:   Instal ...

  9. Android 带你读懂事件分发

    工作有一段时间,有必要掌握事件传递的机制,最近研究了一下,记录下心得.1 Android中的事件 android中触摸事件比较多,封装中MotionEvent类中,点击.触摸.滑动是我们常用的事件 M ...

  10. sun.misc.BASE64Encoder 不建议使用java.sun自带包中的内容

    import sun.misc.BASE64Decoder; 在项目中,设计到64位编码的.有时开发会用到JDK中自带的BASE64工具.但sun公司是建议不这样做的.尤其是更新了JDK版本,项目甚至 ...