sub,dl,dt,排版,横向滚动条,浮动元素居中,box-sizing
1.sub标签 下标
2.dl,dt,dd用的地方通常是具有标题,而标题下对应有若干列表简单的(栏目标题+对应标题列表)和标题对应下面有内容。在使用时候我们能简洁html代码情况下,学会灵活使用dl dt dd,
3.实现左侧自适应右侧固定宽度的布局
3.1 rightbar必须在left前面,因为块级元素在前面的话,浮动元素就自动到下一行了
<div class="wrap">
<div class="rightbar"></div>
<div class="left"></div>
</div>
.wrap {
height: 50px;
}
.left {
margin-right: 200px;
background-color: green;
height: 50px;
}
.rightbar {
float: right;
width: 200px;
background-color: red;
height: 50px;}
3.2 使用position:absolute 可以实现,但是如果rightbar高度比left高就会影响下一行元素
3.3 使用一个div包裹左侧div并浮动,通过外层div负margin,里面div正margin实现
3.4 传送门: http://jo2.org/css-auto-adapt-width/
4.一些名词: tooltips用于鼠标移到一些标签上会显示提示信息的情况
5.换行会出现空白字符,解决方案:给父元素设置font-size: 0;
<div class="container">
<div class="left"></div> //空白字符
<div class="right"></div>
</div>
6.如何让tab栏nav宽度大于屏幕宽度时,里面的元素不换行显示:用横向滚动条,将UL包裹在div.wrap里,当UL宽度大于屏幕宽度时,将UL宽度设置为所以li宽度的总和,div设置overflow-x:scroll
<div class="nav-wrap">
<ul class="nav nav-tabs product-tab" role="tablist">
<li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">特别推荐</a></li>
<li role="presentation"><a href="#profile" role="tab" data-toggle="tab">微投资</a></li>
<li role="presentation"><a href="#messages" role="tab" data-toggle="tab">微小宝</a></li>
<li role="presentation"><a href="#settings" role="tab" data-toggle="tab">微消费</a></li>
<li role="presentation"><a href="#settings" role="tab" data-toggle="tab">微增利</a></li>
<li role="presentation"><a href="#settings" role="tab" data-toggle="tab">微金宝</a></li>
<li role="presentation"><a href="#settings" role="tab" data-toggle="tab">微转让</a></li>
<li class="pull-right hidden-sm hidden-xs"><a href="#settings" >更多</a></li>
</ul>
</div>
var product_nav = $("#product-decoration .product-tab");
var product_nav_width = 30;
product_nav.children().each(function(index,element) {
product_nav_width += element.offsetWidth;
})
if(product_nav_width > $(window).width()) {
$("#product-decoration .product-tab").css("width",product_nav_width);
$("#product-decoration .nav-wrap").css("overflow-x","scroll");
//console.log(product_nav_width)
}else {
$("#product-decoration .nav-wrap").css("overflow-x","auto");
}
7.box-sizing
有3种值,content-box(默认),padding-box(有兼容问题),border-box
sub,dl,dt,排版,横向滚动条,浮动元素居中,box-sizing的更多相关文章
- 如何垂直居中元素(浮动元素&居中一个<img>)?
1.如何居中一个浮动元素? 方法一:已知元素的高度 <!DOCTYPE html> <html lang="en"> <head> < ...
- css 浮动元素居中
方法一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- H5禁止底部横向滚动条,使一个元素居中
1.禁止底部横向滚动条 选择元素设置样式 { overflow-y:auto; overflow-x:hidden } 2.元素居中 { margin-left:auto ; margin-right ...
- 用CSS 实现 浮动元素的 水平居中
问题描述: 基本的html结构: <div> <!-- <span>1</span> <span>2</span> <span& ...
- CSS元素居中汇总
总结实现不同类型元素居中的几种方法: 一.把margin值设置为auto(实现水平居中) 可以实现元素水平居中对齐 原理:使 margin-left=margin-right 如果设置 marg ...
- html dl dt dd标签元素语法结构与使用
dl dt dd认识及dl dt dd使用方法 标签用于定义列表类型标签. dl dt dd目录 dl dt dd介绍 结构语法 dl dt dd案例 dl dt dd总结 一.dl dt dd认识 ...
- html dl dt dd标签元素语法结构与使用
dl dt dd认识及dl dt dd使用方法 <dl> 标签用于定义列表类型标签. dl dt dd目录 dl dt dd介绍 结构语法 dl dt dd案例 dl dt dd总结 一. ...
- 边框,元素居中,盒子模型,margin,display,overflow,textarea,float,浮动停止条件,清除浮动影响,margin-top的bug,清除默认样式
边框 solid实线 dotted虚线 dashed点线 盒子在页面中实际的宽高都是5部分组成 宽=borderleft+paddingleft+width+paddingright+borderri ...
- HTML5标签选择,图文混排使用dl dt dd
图文混排,可以使用 dl dt dd(dd 和 dt 是同级,不可以嵌套,没有先后顺序) 1,上面红色部分是标题,可以使用h1里面包含一个span标签,样式一样,所以两个可以一起写. 2,上面黑色部分 ...
随机推荐
- 使用vlmcsd自建KMS服务~一句命令激活windows/office
服务作用:在线激活windows和office 适用对象:VOL版本的windows和office 适用版本:截止到win10和office2016的所有版本 服务时间:24H,偶尔更新维护 优点:在 ...
- supervisor踩坑记录
线上一直以来都在用supervisor管理各项服务,感觉非常舒心,supervisor管理`gunicorn`和`celery`进程,web服务和异步任务各司其职,跑起来一直很稳定. 前段时间却不小心 ...
- D. Jzzhu and Numbers
这就是这个题目的意思,真的感觉这个思想是太神奇了,我这种菜逼现在绝壁想不到这样的证明的过程的,还有就是这个题的推道过程,以下思路纯属借鉴卿学姐的,还是自己太菜了,,,, 讲道理这种问题我真的想不到用容 ...
- Android项目实战(三十一):异步下载apk文件并安装(非静默安装)
前言: 实现异步下载apk文件 并 安装.(进度条对话框显示下载进度的展现方式) 涉及技术点: 1.ProgressDialog 进度条对话框 用于显示下载进度 2.AsyncTask ...
- stm32 复位后 引起引脚的变化,输出电平引起的问题
在做项目的时候,需要通过蓝牙发送指令给STM32,使其复位,然后进入bootloader程序进行升级,但是复位后会导致蓝牙模块关机.stm32有个引脚连接着蓝牙的开关机引脚,高电平开机,低电平关机,我 ...
- VS2010 MSDN的介绍
5 cout << temp; 博客园第一篇文章的开始. VS2010 MSDN的文档介绍 https://msdn.microsoft.com/zh-cn/library/dd8 ...
- SpringMVC4+MyBatis3+SQLServer 2014 整合(包括增删改查分页)
前言 说起整合自然离开ssm,我本身并不太喜欢ORM,尤其是MyBatis,把SQL语句写在xml里,尤其是大SQL,可读性不高,出错也不容易排查. 开发环境 idea2016.SpringMVC4. ...
- RAC之常用方法-----新手入门
年后换工作新入职,公司开发在使用RAC,之前居然一直没有了解过,独立开发的弊端,信息闭塞,而且自己也懒,这几天看了下RAC,确实很强大有木有. 什么是ARC 简单的说,RAC就是一个第三方库,他可以大 ...
- nginx配置参数详解
配置参数详解 user nginx nginx ; Nginx用户及组:用户 组.window下不指定 worker_processes 8; 工作进程:数目.根据硬件调整,通常等于CPU数量或者2倍 ...
- ES6-01:常量与变量的声明
首先,我们声明一个变量: //定义一个变量num,并赋值为10: let num = 10; //进行打印 console.log(num); let与var有所不同: 语法特点1:let变量只能在当 ...