一、如何用一张图片做背景图,并且图片自适应div的大小

background: url("../stu_wengu.png") center center no-repeat;
background-size: cover;
/*实现在整个页面中的完全显示效果*/
body{ background-image:url(""); background-size:color;/*自适应*/ background-repeat:no-repeat; background-attachment:fixed; }

二、子div设置margin-top使得父div也跟着向下移动

这个问题发生的原因是根据规范,一个盒子如果没有上补白(padding-top)和上边框(border-top),那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

再说白点就是:父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己“领导”(父元素,祖先元素)的麻烦。只要给领导设置个有效的 border或
者padding就可以有效的管制这个目无领导的margin防止它越级,假传圣旨,把自己的margin当领导的margin执行。 解决方法: 
1、修改父元素的高度,增加padding-top样式模拟(padding-top:1px;常用) 
2、为父元素添加overflow:hidden;样式即可(完美) 
3、为父元素或者子元素声明浮动(float:left;可用) 
4、为父元素添加border(border:1px solid transparent可用) 
5、为父元素或者子元素声明绝对定位

三、外层div已经设置了text-align:center;,里面的div为啥还是不居中

display:block;元素 用属性margin: 0 auto;搞定左右居中

display:inline-block;元素 用属性text-align: center;搞定左右居中

四、font-weight参数:

normal : 正常的字体。相当于number为400。声明此值将取消之前任何设置
bold : 粗体。相当于number为700。也相当于b对象的作用
bolder : IE5+ 特粗体
lighter : IE5+ 细体
number : IE5+ 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
详细基础加粗知识请进CSS手册中的font-weight手册。

Html常规加粗标签
以前html直接对对象加粗的标签如下:
<b></b>或<strong></strong>两者效果相同。

12个HTML和CSS必须知道的重点难点问题链接地址:https://blog.csdn.net/zhuoganliwanjin/article/details/80366287

html 和css 效果--整理集合篇的更多相关文章

  1. JAVA基础整理-集合篇(一)

    集合作为JAVA的基础知识,本来感觉自己理解的很清楚了,但是在最近的一次面试中还是答得不尽如人意!再次做一下整理,以便加深理解以及随时查阅. 首先,java.util包中三个重要的接口及特点:List ...

  2. CSS效果篇--这里有你想要的CSS3漂亮的自定义Checkbox各种复选框

    在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>.这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html代码都 ...

  3. 整理六百篇web前端知识混总

    9个有用的和免费的工具来支持动态网页开发 8个基本的引导工具的网页设计师 11款CSS3动画工具的开发 2016年某前端群题目答案参考 9最好的JavaScript压缩工具 创建响应式布局的10款优秀 ...

  4. [转载] 高大上的 CSS 效果:Shape Blobbing

    这篇大部分是转载,来自<高大上的 CSS 效果:Shape Blobbing>和 <Shape Blobbing in CSS> 有部分是自己理解和整理,配合效果要做出 app ...

  5. [JS,NodeJs]个人网站效果代码集合

    上次发的个人网站效果代码集合: 代码集合: 1.彩色文字墙[鼠标涟漪痕迹] 2.彩色旋转圆环 [模仿http://www.moma.org/interactives/exhibitions/2012/ ...

  6. CSS效果:这里有你想要的CSS3漂亮的自定义Checkbox各种复选框

    在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>. 今天这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html ...

  7. Unite 2017 干货整理 优化篇

    Unite 2017 干货整理 优化篇 2017年05月16日 将Unite 2017的一些演讲做了整理.  本篇有内存,CPU.GC.UI.渲染性能指标.Tips几个小节.  内容持续整理中. 内存 ...

  8. JUC源码分析-集合篇(九)SynchronousQueue

    JUC源码分析-集合篇(九)SynchronousQueue SynchronousQueue 是一个同步阻塞队列,它的每个插入操作都要等待其他线程相应的移除操作,反之亦然.SynchronousQu ...

  9. JUC源码分析-集合篇(三)ConcurrentLinkedQueue

    JUC源码分析-集合篇(三)ConcurrentLinkedQueue 在并发编程中,有时候需要使用线程安全的队列.如果要实现一个线程安全的队列有两种方式:一种是使用阻塞算法,另一种是使用非阻塞算法. ...

随机推荐

  1. nsq源码阅读笔记之nsqd(三)——diskQueue

    diskQueue是backendQueue接口的一个实现.backendQueue的作用是在实现在内存go channel缓冲区满的情况下对消息的处理的对象. 除了diskQueue外还有dummy ...

  2. Java的LockSupport.park()实现分析(转载)

    LockSupport类是Java6(JSR166-JUC)引入的一个类,提供了基本的线程同步原语.LockSupport实际上是调用了Unsafe类里的函数,归结到Unsafe里,只有两个函数: p ...

  3. php与html实现交互的基本操作

    今天我们来实现php与html页面注册和登录的效果.中国有句古话叫: 第一步:我们来了解一些php的基本格式. <?php php代码 ?> 第二步:了解php与js的一些基本区别 我们在 ...

  4. 聊聊Socket、TCP/IP、HTTP、FTP及网络编程

    1 这些都是什么 既然是网络传输,涉及几个系统之间的交互,那么首先要考虑的是如何准确的定位到网络上的一台或几台主机,另一个是如何进行可靠高效的数据传输.这里就要使用到TCP/IP协议. 1.1 TCP ...

  5. Python多版本管理-pyenv

    经常遇到这样的情况: 系统自带的Python是2.x,自己需要Python 3.x,此时需要在系统中安装多个Python,但又不能影响系统自带的Python,即需要实现Python的多版本共存,pye ...

  6. 【填坑纪事】一次用System.nanoTime()填坑System.currentTimeMills()的实例记录

    JDK提供了两个方法,System.currentTimeMillis()和System.nanoTime(),这两个方法都可以用来获取表征当前时间的数值.但是如果不仔细辨别这两个方法的差别和联系,在 ...

  7. 外网访问FTP出错200 Type set to A

    打开IE浏览器,在intenet选项里的高级==> 这里没有勾就对了!

  8. Redis缓存穿透、缓存雪崩和缓存击穿理解

    1.缓存穿透(不存在的商品访问数据造成压力) 缓存穿透,是指查询一个数据库一定不存在的数据.正常的使用缓存流程大致是,数据查询先进行缓存查询,如果key不存在或者key已经过期,再对数据库进行查询,并 ...

  9. Unity 用ml-agents机器学习造个游戏AI吧(1)(Windows环境配置)

    前言:以前觉得机器学习要应用于游戏AI,还远得很. 最近看到一些资料后,突发兴致试着玩了玩Unity机器学习,才发觉机器学习占领游戏AI的可能性和趋势. Unity训练可爱柯基犬Puppo 机器学习训 ...

  10. vue slot+传参

    插槽分为默认插槽和具名插槽: 默认插槽: //父组件<div> <h3>父组件</h3> <testChild> <div>默认插槽< ...