line-height | 易学教程

锚点及:target伪类的配合使用

阅读更多关于锚点及:target伪类的配合使用

一. 锚点的用法锚点的用法有两种，但性质同样，都是通过链接标签以及其href属性实现的：页内跳转。跳到其他页面的某个区域。 1. 页内跳转的锚点用法：给将要跳转到的标签添加ID，然后将每个链接标签的href属性分别按顺序与每个div的ID相对应。【注意：href属性后的ID号必须有“#”，否则无效。】 <!DOCTYPE html> < html > < head > < title > 锚点的使用 </ title > < style type = " text/css " > body { font-family : "微软雅黑" ; height : 2000px ; /* 要有足够的高度，否则不能体现出效果 */ } .nav { margin : 50px auto 0 ; text-align : center ; background-color : #cfcfcf ; line-height : 40px ; } .nav a { display : inline-block ; padding : 5px 10px ; font-size : 16px ; text-decoration : none ; color : #fff ; text-shadow : 1px 1px 5px #04acef ; } .nav a:hover {

Css的盒子模型

阅读更多关于 Css的盒子模型

Css的盒子模型 1.盒模型的组成部分盒模型规定了网页元素如何显示以及元素之间相互关系，包含边框、边界、补白、内容区 2.border属性 border-width边框宽度 border-color边框颜色 border-style边框样式solid/dashed/dottedd/double 简写border：1px solid red border-top/bottom/left/right 3.margin属性：元素外边的空白区域被称为外边距 margin-top/bottom/left/right 属性值的4种方式：上右下左上左右下上下左右四个方向 margin-top有兼容问题时，应该给父元素添加边框border-top或给父元素（或子元素添加浮动）或给父元素添加overflow：hidden margin可以给负值，margin:0 auto可以让一个有宽度的容器水平居中 4.padding属性 padding-top/bottom/left/right padding在设定页面中一个元素的边缘（边框）之间的距离，也称补白用来调整内容在容器中的位置关系 padding是额外加在元素原有大小基础上的，若想元素大小不改变，需要从宽或高减掉添加的padding值属性值的4种方式：上右下左上左右下上下左右四个方向 5

Python爬虫（一）

阅读更多关于 Python爬虫（一）

本教程基于Python3.6，Mac OS系统，Pycharm编辑器使用urllib库可以获取网页,示例代码如下 1 from urllib import request 2 3 #要爬取的网页，这里以百度为例 4 url = 'http://www.baidu.com/' 5 6 #构建请求对象Request 7 res = request.Request(url) 8 9 #发起请求，得到请求结果，命名为response 10 response = request.urlopen(res) 11 12 #读取结果，命名为html 13 html = response.read() 14 15 #打印查看结果 16 print(html) 可以看到打印的结果为 /Library/Frameworks/Python.framework/Versions/3.6/bin/python3.6 /Users/pn/Desktop/Python/blog/demo.py b'<!DOCTYPE html>\n\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n

HTML的select控件美化

阅读更多关于 HTML的select控件美化

HTML的select控件美化 CSS： .div-select { border: solid 1px #999; height: 40px; line-height: 40px; cursor: default; } .div-select-text { float: left; background-color: #fff; height: 100%; word-break: keep-all; overflow: hidden; cursor: default; } .div-select-text > div { padding: 3px; line-height: 34px; } .div-select-arrow { background-color: #fff; float: right; width: 40px; height: 100%; color: #999; cursor: default; } .div-select-arrow > div { border: solid 1px #999; margin: 2px; height: 34px; background-color: #f2f2f2; text-align: center; line-height: 34px; font-size: 22px; } .div-select-list {

新手如何在gdb中存活

阅读更多关于新手如何在gdb中存活

今天阅读博文新手如何在gdb中存活时，发现行距太小，阅读起来不舒服。查看了一下html代码，发现是博文内容中的内联style（line-height: normal）覆盖了博客模板的css引起的。开始想到的方法是通过javascript代码从inline style中移除line-height: normal。但这样效率太低了，每篇博文都要检查是否在inline style中包含了line-height: normal。最理想的方法当然是通过css去覆盖inline style，根据这个思路在网上找到了一篇文章—— Override Inline Styles with CSS 。css果然可以做到，这才是我想要的最简单的解决方法： #cnblogs_post_body p span[style]{ line-height: 1.8 !important; } 知识真的可以让程序员工作得更轻松！来源： https://www.cnblogs.com/dudu/p/css_override_inline_style.html

CSS中强大的EM

阅读更多关于 CSS中强大的EM

使用CSS也好久了，但一直都是在使用“px”来设置Web元素的相关属性，未敢使用“em”。主要原因是，对其并不什么了解，只知道一点概念性的东西，前段时间在项目中要求使用“em”作为单位设置元素，所以从头对“em”学习了一回。稍为有一点理解，今天特意整理了一份博文与大家一起分享，希望对童子们有些许的帮助。这篇教程将引导大家如何使用“em”来创建一个基本的弹性布局，从而学习其如何计算？又是如何使用“em”对层进行弹性扩展？又是如何扩展文本和图像等内容？下在我们就一起带着这些问题开始今天的“em”之行。什么是弹性布局？用户的文字大小与弹性布局用户的浏览器默认渲染的文字大小是“16px”，换句话说，Web页面中“body”的文字大小在用户浏览器下默认渲染是“16px”。当然，如果用户愿意他可以改变这种字体大小的设置，用户可以通过 UI控件来改变浏览器默认的字体大小。弹性设计有一个关键地方 Web页面中所有元素都使用“em”单位值。“em”是一个相对的大小，我们可以这样来设置 1em，0.5em，1.5em 等，而且“em”还可以指定到小数点后三位，比如“1.365em”。而其中“相对”的意思是：相对的计算必然会一个参考物，那么这里相对所指的是相对于元素父元素的 font-size 。比如说：如果在一个<div> 设置字体大小为“16px”，此时这个<div

css -- vue侧边栏

阅读更多关于 css -- vue侧边栏

<template> <div class="navbar_left"> <li> <div class="navbar_left_o"> <i class="el-icon-user" v-on:mouseover="change1Active($event)" v-on:mouseout="remove1Active($event)"></i> </div> <div class="navbar_left_o_r box"> <div> <div class=""> <i class="el-icon-user"></i> </div> <div> <span>在线客服</span> <span>工作日 9:00 - 18:00</span> </div> <div> <img src="../assets/image/QRCode.png"> </div> </div> <div style="width:100%; border-top: 1px solid #F2F2F2;padding-top: 10px;text-align: center;font-size:14px;color:#999999 ;"> 添加微信客服在线解决问题 </div> </div> </li> <li> <div class="navbar_left_o"> <i class="el

小程序页面排版样式例子

阅读更多关于小程序页面排版样式例子

在网上下载一个小程序源码，排版样式挺好看的，参照着写了几个例子。 1、例子1效果图代码实现（1）全局样式app.wxss @import 'style/weui.wxss'; page{ background-color: #F8F8F8; font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif; } .text-center{text-align: center;} /* 字体大小规范 */ .font-lv1{font-size: 36rpx !important;} .font-lv2{font-size: 32rpx !important;} .font-lv3{font-size: 28rpx !important;} .font-lv4{font-size: 24rpx !important;} .font-lv5{font-size: 20rpx !important;} .strong{font-weight: bold;} /* margin */ .mgt-15rpx{margin-top: 15rpx;} .mgb-15rpx{margin-bottom: 15rpx;} .mgl-15rpx{margin-left: 15rpx;} .mgr-15rpx{margin

纯CSS气泡框实现方法探究

阅读更多关于纯CSS气泡框实现方法探究

气泡框（或者提示框）是网页中一种很常见的元素，大多用来展示提示信息，如下图所示：拆分来看，形如这种气泡框无外乎就是一个矩形框+一个指示方向的三角形小箭头，要制作出这样的气泡框，如果解决了三角形小箭头就容易了。一种方法就是制作这样一个三角形箭头的图片，然后定位在矩形框上。但这种解决办法在后期更改气泡框会很不方便，可能每修改一次气泡框都要重新制作一个三角形小图标。如果我们能够直接用HTML和CSS代码实现这样一个三角形小箭头一切都迎刃而解了。首先我们来看一下border这个属性，当我们把一个div的border-color设为不同值的时候，可以看到四边都成了一个梯形。 1 # test{ width : 50px ; height : 50px ; border-width : 50px ; border-style : solid ; border-color : #09F #990 #933 #0C9 ;} 如果我们继续把这个div的width和height都设为0，可以看到四边都成了一个三角形。 1 # test{ width : 0 ; height : 0 ; border-width : 75px ; border-style : solid ; border-color : #09F #990 #933 #0C9 ;} 在主流浏览器中检测一下

【第十六篇】这一次要写的是bootstrap-table

阅读更多关于【第十六篇】这一次要写的是bootstrap-table

先上图吧这就是效果图上代码（这一部分是工具栏的，还包括slider滑动条） <div class="box-body"> <div class="row"> <div class="form-group col-xs-3" style="width: 432px;"> <label for="SendUser" class="col-sm-2 control-label">重量</label> <div class="col-sm-10"> <div class="nstSlider" id="shapeNstSlider" data-aria_enabled="true" data-range_min="1" data-range_max="3000" data-cur_min="1" data-cur_max="3000"> <div id="bar" class="bar"></div> <div id="leftGrip" class="leftGrip"></div> <div id="rightGrip" class="rightGrip"></div> </div> <div class="input-prepend input-append pull-left"> <input class="span2 " id="leftLabel" style="width:

订阅 line-height