html美化 | 易学教程

纯CSS3美化 input 的checkbox 和 radio

阅读更多关于纯CSS3美化 input 的checkbox 和 radio

magic-input CSS3样式复选框和单选按钮看起来更漂亮。只有一个input元素。在线demo 源码： https://github.com/jaywcjlove/magic-input 使用 $ npm install magic-input 你需要引入 dist/magic-input.css 或者 dist/magic-input.min.css 文件到你的工程或者HTML中。如果你使用 Stylus 你就可以使用 magic-input.styl 文件 <link rel="stylesheet" type="text/css" href="dist/magic-input.min.css"> Checkbox iPhone 的样式 <input type="checkbox" class="mgc-switch mgc-sm" checked /> <input type="checkbox" class="mgc-switch" /> <input type="checkbox" class="mgc-switch mgc-lg" checked /> Checkbox <input type="checkbox" class="mgc" checked/> Default <input type="checkbox" class="mgc mgc

【博客美化】09.评论带头像，且支持旋转

阅读更多关于【博客美化】09.评论带头像，且支持旋转

博客园美化相关文章目录：【博客美化】01.推荐和反对炫酷样式【博客美化】02.公告栏显示个性化时间【博客美化】03.分享按钮【博客美化】04.自定义地址栏logo 【博客美化】05.添加GitHub链接【博客美化】06.添加QQ交谈链接【博客美化】07.添加打赏按钮【博客美化】08.添加"扩大/缩小浏览区域大小" 按钮【博客美化】09.评论带头像，且支持旋转【博客美化】10.图片预览放大 1.添加GitHub链接进入自己的博客园->设置，将以下html代码添加到“页首Html代码” <a href="https://github.com/Jackson0714" target="_blank">　　<img style="position: fixed; top: 0; right: 0; border: 0; z-index: 1;" src="http://images.cnblogs.com/cnblogs_com/jackson0714/779808/o_github.png" ></a> 替换href为自己的GitHub地址 src的图片链接地址可以设置为其他地址。添加后，效果如图所示：作　　者： Jackson0714 出　　处： http://www.cnblogs.com/jackson0714/ 关于作者：专注于微软平台的项目开发

【全网最全的博客美化系列教程】02.添加QQ交谈链接

阅读更多关于【全网最全的博客美化系列教程】02.添加QQ交谈链接

全网最全的博客美化系列教程相关文章目录【全网最全的博客美化系列教程】01.添加Github项目链接【全网最全的博客美化系列教程】02.添加QQ交谈链接【全网最全的博客美化系列教程】03.给博客添加一只萌萌哒的小仓鼠【全网最全的博客美化系列教程】04.访客量统计的实现【全网最全的博客美化系列教程】05.公告栏个性时间显示的实现【全网最全的博客美化系列教程】06. 推荐和反对炫酷样式的实现【全网最全的博客美化系列教程】07.添加一个分享的按钮吧【全网最全的博客美化系列教程】08.自定义地址栏Logo 【全网最全的博客美化系列教程】09. 添加"扩大/缩小浏览区域大小" 按钮【全网最全的博客美化系列教程】10.小火箭置顶特效的实现【全网最全的博客美化系列教程】11.鼠标点击爱心特效的实现【全网最全的博客美化系列教程】12.修改鼠标图案【全网最全的博客美化系列教程】13.鼠标点击效果升级的实现【全网最全的博客美化系列教程】14.代码高亮设置的实现【全网最全的博客美化系列教程】15.动画幻灯效果的实现【全网最全的博客美化系列教程】16.给博客添加一个打赏的实现【全网最全的博客美化系列教程】17.博客背景刷新切换效果的实现【全网最全的博客美化系列教程】18.数学之美---动态几何线条的实现【全网最全的博客美化系列教程】19.旋转立方体的实现

【全网最全的博客美化系列教程】06.推荐和反对炫酷样式的实现

阅读更多关于【全网最全的博客美化系列教程】06.推荐和反对炫酷样式的实现

【博客美化】10.图片预览放大

阅读更多关于【博客美化】10.图片预览放大

博客园美化相关文章目录：【博客美化】01.推荐和反对炫酷样式【博客美化】02.公告栏显示个性化时间【博客美化】03.分享按钮【博客美化】04.自定义地址栏logo 【博客美化】05.添加GitHub链接【博客美化】06.添加QQ交谈链接【博客美化】07.添加打赏按钮【博客美化】08.添加"扩大/缩小浏览区域大小" 按钮【博客美化】09.评论带头像，且支持旋转【博客美化】10.图片预览放大 1.页首添加HTML代码进入自己的博客园->设置，将以下html代码添加到“页首Html代码” <div id="divExpandViewArea" onclick="$('#mainContent').css({'margin-left':'0'});$('#sideBar').css({'display':'none'});">扩大</div> <div id="divCollapseViewArea" onclick="$('#mainContent').css({'margin-left':'300px'});$('#sideBar').css({'display':'block'});">缩小</div> 　　 2.添加定制CSS #divExpandViewArea{ position: fixed; color: white; /* border-radius:

怎样用css来美化一个html页面

阅读更多关于怎样用css来美化一个html页面

# 转载请留言联系我们都知道html写出来的东西是一个文本内容，很单调。和我们平时刷网页看到的内容不一样。那普通的网页是怎样对html超文本进行装饰的呢？没错，就是CSS。 css的基本语法选择器{ 样式属性:样式值; 样式属性:样式值; 样式属性:样式值; } 实际效果，例如： div{ width:100px; height:100px; background:gold; } CSS的引入方式 1.内联式：通过标签的style属性，在标签上直接写样式。 <!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8"> <title>Title</title> </head> <body> <p style="font-size: 50px; color:greenyellow; background: black; height:150px; width: 250px;">我是段落1</p> <p>我是段落2</p> <p>我是段落3</p> </body> </html> 这种方式会使HTML源代码过于杂乱，而且不能进行拓展，所以基本不用。 --------------------------------------------------------

美化修改radio、checkbox的样式

阅读更多关于美化修改radio、checkbox的样式

原理：大致原理都是使用原生的checkbox或input标签，在其后面设置相关联的label元素。给<input>元素设置为透明，然后通过定位让用户看到的是<label>元素，利用css的原生属性来判断用户的操作，设置选中后的label样式,即 input[type=checkbox]:checked+label{} 一、利用css3伪元素实现样式修改 html： <p>您的性别：</p> <div class="radio-sex"> <input type="radio" id="sex1" name="sex"> <label for="sex1"></label> <span>男</span> </div> <div class="radio-sex"> <input type="radio" id="sex2" name="sex"> <label for="sex2"></label> 女 </div> css： .radio-sex { position: relative; display: inline-block; margin-right: 12px; } .radio-sex input { vertical-align: middle; margin-top: -2px; margin-bottom: 1px; /*