css样式实例
* {
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样式实例的更多相关文章
- jQuery CSS()方法改变CSS样式实例解析
转自:http://www.jbxue.com/article/24588.html 分享一个jQuery入门实例:使用CSS()方法改变现有的CSS样式表,css()方法在使用上具有多样性.其中有一 ...
- 每天一个JavaScript实例-展示设置和获取CSS样式设置
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- css美化Div边框的样式实例*(转载)
css美化Div边框的样式实例 很多时候如果不是用了很多样式,很难把边框修饰得好看,看了一篇博文,觉得真的挺漂亮,也挺好看. 转载的博文地址 将这段美化的css代码 border:1px soli ...
- Django 小实例S1 简易学生选课管理系统 12 CSS样式完善
Django 小实例S1 简易学生选课管理系统 第12节--CSS样式完善 点击查看教程总目录 作者自我介绍:b站小UP主,时常直播编程+红警三,python1对1辅导老师. 课程模块的逻辑代码到这里 ...
- Django 小实例S1 简易学生选课管理系统 8 CSS样式优化
Django 小实例S1 简易学生选课管理系统 第8节--CSS样式优化 点击查看教程总目录 作者自我介绍:b站小UP主,时常直播编程+红警三,python1对1辅导老师. 前面的几节下来,用户模块基 ...
- css样式 --- CSS hack
前端样式,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道一 ...
- js之如何获取css样式
js之如何获取css样式 一.获取内联样式 1 <div id ="myDiv" style="width:100px;height:100px; border ...
- HTML 学习笔记 CSS样式(字体)
css字体属性定义文本的字体系列 大小 加粗 风格 和 变形(如小型大写字母(类似于大写字母字体变小了)) css字体系列 在css中 有两种不同类型的字体系列名称 1.通用字体系列 - 拥有相似外观 ...
- 谷歌浏览器 查看源码里的a:hover CSS样式 还有火狐的查看方式
谷歌浏览器查看hover css样式 直接实例: 选中a标签 然后右侧面板 出现 箭头 点击 出现Toggle Element state提示 下面再hover前打勾 直接就可以显示效果了 浏览器查看 ...
随机推荐
- Unit Test in SpringBoot
此处的Unit Test in SpringBoot 包括: SpringApplication Test Service Test ControllerTest 测试项目结构如下: 代码如下: PO ...
- 第九周学习总结&实验报告七
实验报告: 实验任务详情: 完成火车站售票程序的模拟. 要求: (1)总票数1000张: (2)10个窗口同时开始卖票: (3)卖票过程延时1秒钟: (4)不能出现一票多卖或卖出负数号票的情况. 实验 ...
- 最长不重复子串长度,时间复杂度O(n),空间复杂度O(n),Python实现
def lengthOfLongestSubstring(s): res = 0 d = {} tmp = 0 start = 0 for i in range(len(s)): if s[i] in ...
- 威胁猎杀实战(三):基于Wazuh, Snort/Suricata和Elastic Stack的SOC
https://www.secpulse.com/archives/81629.html
- 源码编译apache出错
报错信息如下 exports.c:1572: error: redefinition of `ap_hack_apr_allocator_create' exports.c:177: error: ` ...
- 1436:数列分段II
1436:数列分段II 题解 二分答案 我们最终答案的取值区间是[ max(a[i]) , ∑a[i] ] 设定 l=max(a[i]) , r=∑a[i] , mid不断二分 mid表示 ...
- 由MySQL登录不了引发的一些问题
经手的项目按照老板的意思,想搞一个类似于个人学习版的版本给客户试用.计划通过网络将安装包发布出去,让客户自行下载安装使用,碰到个问题:数据库的安装.因为后台使用了MS SQLServer 2008/2 ...
- ControlTemplate in WPF —— ComboBox
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x ...
- Libvirt 版本降级过程记录 4.5.0 to 3.9.0
前言 搞 OpenStack 开发 Libvirt 版本会随着 OpenStack 版本切来切去的,记录一下 Libvirt 从 4.5 降级到 3.9.0 的过程. 步骤 直接 downgrade ...
- VueLoaderPlugin作用
在webpack配置里加入new VueLoaderPlugin, 在plugin里打断点 然后debug: 在这个地方: 可以发现,在webpack初始化的阶段..webpack.js刚开始执行的时 ...