css
Henry_Jing
致力于全栈开发~~
展开
-
浅析div的浮动
由于在学习HTML元素浮动的时候,总是拎不清,比如什么时候需要浮动,什么时候需要清除浮动,左右浮动后,下一个元素显示在哪里,下下个元素显示在哪里等问题。而div的浮动布局问题在页面设计又是比较重要的,现自己学习总结了一下,供大家学习交流。首先初始我们定义了6个div,它们的class是这样的,div、div1、div2、div3、div4、div5,它们的高度是一样的。都是200px。接下原创 2016-12-12 20:17:22 · 991 阅读 · 0 评论 -
css学习之动画效果
移动效果:transform:translate(200px,100px);//不同浏览器还需要不同的适应旋转效果:transform: rotate(180deg);缩放效果:transform:scale(1,2)//横向不变,纵向放大2倍倾斜效果:transform:skew(50deg,50deg)过渡:通过使用CSS3,可以给元素添加一些效原创 2016-12-09 11:06:14 · 316 阅读 · 0 评论 -
css学习之图片操作
垂直导航栏水平导航栏原创 2016-12-08 08:37:34 · 421 阅读 · 0 评论 -
多类、属性、后代、子元素、相邻兄弟选择器
多类选择器效果图:代码:html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> style type="text/css"> .p1{ color: red; } .p2{ f原创 2016-12-07 13:22:03 · 559 阅读 · 0 评论 -
浮动布局实现瀑布流
效果图:示例代码:html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> style type="text/css"> *{ margin: 0; padding: 0px; }原创 2016-12-06 21:23:47 · 1552 阅读 · 0 评论 -
css学习之定位
1、css定位2、定位机制:普通流:元素按照其在HTML中的位置顺序决定排布的过程浮动绝对布局3、css定位属性position:static relative absolute fixed(1)position设置为staticstatic属性表示被修饰的div在父容器内按照普通流布局,left,right等设置属性值不会生效。示例:代码部分:原创 2016-12-06 20:22:36 · 345 阅读 · 0 评论 -
css学习之盒子模型应用
html代码: 盒子模型的应用 css代码:*{ margin: 0px; padding: 0px;}.top{ wid原创 2016-12-06 16:34:10 · 600 阅读 · 0 评论 -
css学习之边框样式、外边距合并
边框的样式:border-style:定义了10个不同的非继承样式,包括none边框的单边框样式:border-top-styleborder-left-styleborder-right-styleborder-bottom-style边框的宽度:border-width单边框:border-top-widthborder-原创 2016-12-06 09:56:12 · 1554 阅读 · 0 评论 -
css学习之属性选择器
1、属性选择器2、属性和值选择器原创 2016-12-05 22:20:46 · 421 阅读 · 0 评论 -
css学习之二轮廓
效果:HTML:html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> link href="style.css" rel="stylesheet" type="text/css">head>body> p>突出的效果文字p>body>html>CS原创 2016-12-05 21:57:55 · 358 阅读 · 0 评论 -
css学习之二表格
效果图如下:代码如下:HTML Title 姓名 年龄 性别 小王 20 男原创 2016-12-05 21:47:24 · 423 阅读 · 0 评论 -
css学习之一使用自定义字体
css样式表中可以这样定义:@font-face{ font-family: myfont; /*自己下载的字体*/ src:url();}div{ font-family: myfont;}原创 2016-12-05 20:37:27 · 446 阅读 · 0 评论 -
HTMl与CSS简单页面页面效果实例
效果图如下:HTML和CSS代码:html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> style type="text/css"> .div{ position: relative; margin-l原创 2016-12-12 20:23:55 · 7512 阅读 · 0 评论 -
overflow:hidden用法
最近学习css的overflow元素的hidden属性,总结2点作用:1、当父元素设置了height值时,则设置overflow:hidden后,子元素超出父元素部分隐藏2、当父元素的高度是靠子元素撑开的时候,子元素浮动时,则在父元素使用overflow: hidden可以清除浮动,使得父元素的高度依旧是靠子元素撑开。作用1示例:<!DOCTYPE html><...原创 2019-06-16 16:37:52 · 9299 阅读 · 0 评论