css随笔1

没人看系列----css 随笔

目录没人看系列----css 随笔没人看系列----html随笔前言没什么要说的就是自己总结,学习用的如果想学点什么东西,请绕行. CSS (Cascading Style Sheets)层叠样式表引入方式 1.行内式行内式是在标签的style属性中设定CSS样式. <div style="width:200px;height:100px;border:1px solid black;"></div> 2.嵌入式嵌入式是将CSS样式集中写在网页的&…

1.简单清除浏览器样式 *{ padding: 0px; margin: 0px; } 2.得到屏幕范围的div html,body{ width: 100%; height: 100%; } #outer{ width: 100%; height: 100%; } 3.div水平居屏幕中间 #outer{ width: 100%; height: 100%; …

CSS随笔2

1. css中: a:link { /*表示普通的,未被访问的链接状态*/ color: black;} a:visited { /*表示链接被访问过后的状态*/ color: blueviolet;} a:hover { /*表示鼠标放在上面时的状态*/ color: red;}a:active { /*表示链接被点击时的状态*/ color: green;} 其中,hover必须在link和visited之后:active必须在hover之后,可放在其他标签的使用上…

css随笔属性

anchor伪类,用于阅读文章.a:link(没有接触过的链接),用于链接常规状态 (末访问的链接)a:hover(鼠标放在链接上的状态) 用于产生视觉效果(已访问的链接)a:visited(访问过的链接)能清楚判断已经访问的链接(鼠标移动的链接)a:active(在连接上按下鼠标是的状态),用于表现鼠标按下是的链接状态(选定的链接) before after伪类:before p:before 在每个<p>元素之前插入的内容:after p:after 在每个<p>元素之后插入的…

CSS 随笔

1.动态修改div的大小 Html: <div> Hello </div> css: div { resize:both; overflow:auto; } 2. box-sizing 决定width.height 与padding.border的关系 (1). 默认情况下,box-sizing 的值是content-box, 这个时候width和height不包含padding和border <div class="box"> <div cl…

CSS随笔3

1. CSS部分简洁使用 * background-radious:使得边框角“圆化”. * background:pink url(“图片路径”) no-repeat: * border 可以有三个属性值,分别为边框宽度,边框类型,边框颜色,如border:1px inset black:其中的颜色可以用rgba(60,60,60,0.9)进行配置,0.9表示其透明度 [ 使用float:left属性后如果对后面的内容产生了影响(错位),可以在html中该该属性的使用者后面加换行<br/>…

CSS随笔1（CSS常用样式）

样式属性大小 font-size(x-large ; xx-small ; 可用数值单位 : PX,PD) 样式 font-style(oblique 偏斜体 : italic 斜体 : normal : 正常) 行高 line-height(单位 : PX,PD,EM) 粗细 font-weight(bold 粗体: lighter: 细体: normal : 正常) 修饰 text-decoration(underline 写划线 : overline 上划线 : line-throug…

css随笔

1. 关于使用pre标签,且要自动换行可以使用: word-wrap: break-word; white-space: pre-wrap; 2. 更改placeholder样式 .input::-webkit-input-placeholder { color: #a1a1a1; } .input:-moz-input-placeholder { color: #a1a1a1; } .input::-moz-input-placeholder { color: #a1a1a1; } .inp…

Matplotlib数据可视化（3）：文本与轴

在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像的设置在后续介绍到各种图绘制时介绍). 这里所说的文本是指在使用matplotlib作图过程中通过代码的方式往图中添加的各种文字,包括figure标题.axes标题.坐标轴标签.坐标轴刻度标签.注释.普通文本等.轴设置指的是对与坐标轴相关的的元素的设置,例如显示范围.刻度.刻度标签等. In [1]…

初识html、css时随笔记录

css部分样式圆框效果:border-radius:5px; 固定样式:position:fixed;悬浮窗在IE6中position:absolute其余浏览器可以用fixed: 使table中的表格横线出现一次:border-collapse:collapse; 使两个td的线消失:cellspaceing="0" cellpadding="0"; input添加图片居中方式:align="absmiddle"; 文本框textarea的宽…

css小随笔（二）与通用样式

51先在学校HTML5已经有半个多月了,然后这个星期做了一个京东的手机网站,接触到了通用样式,下面以京东的手机站为例这两个就是京东手机站了的不同的两个板块,因为HTML5仅仅只是学完了基本标签跟css的标签,所以在没有接触通用样式之前很可能就是这两个板块就是两个不同的代码了,然后就会导致css文件里面的代码会非常的多,也会是比较混乱的,不能够清楚明了的看懂.而且应用的通用样式就是可以用一套代码来搞定各个类似板块,并且每个板块不同的地方仅仅需要微调就可以了.这样不仅仅使代码明了,而且还会很省事,…

MVC学习随笔----如何在页面中添加JS和CSS文件

http://blog.csdn.net/xxjoy_777/article/details/39050011 1.如何在页面中添加Js和CSS文件. 我们只需要在模板页中添加JS和CSS文件,然后子页面调用模板页即可. @{ ViewBag.Title = "用户注册"; Layout = "~/Views/Shared/_Layout.cshtml";} 第二句话便是指定该页面的模板页.我们只需要在模板页中进行js和css的引用. 下面来看_Layo…

新手程序员随笔2——初识html、css和javascript

翻看博客,发现好久木有发blog了.纠其原因,一则是近来工作上卡到了一个编程难题,我是一个单线程的小猿,当我手头有事情做的时候,我不想分心去做其它事情,如写blog.二则是我个人的写作能力不佳,想到写blog,拖延心理大获全胜. 现在正值放假,刚好有时间总结一下这段时间来的工作收获,便花点时间,写一下blog. 我大学的读是饥渴专业,接触过几门编程语言,如:C.C++.Java和Python,其中玩弄C++的时间最久.当时的我,天真的以为学好C++,毕业后找份从事C++桌面应用程序开发的工作,就…

css个人随笔，适合新手总结整理

CSS的3种引用方式:1.外部样式表都是在head标签内使用Link标签来引用的.2.内部样式表 <style type="text/css"> </style>标签对是放在<head></head>中的.3.内联样式表(代码冗余,不推荐使用) !important优先级是最高的,属性:值!important基本选择器:1,元素选择器:就是选择相同的元素,然后对相同的元素设置同一个CSS样式.(在style中设置属性,然后在body中的…

js随笔，css和js禁止网页选择文本，table的class样式使得td的class样式失效，jquery获得元素坐标

css使用user-select,user-select不是W3C标准,浏览器支持不完整:user-select有两个值,none用户不可以选择文本,text用户可以选择文本 body{-moz-user-select: none; /*火狐*/-webkit-user-select: none; /*webkit浏览器*/-ms-user-select: none; /*IE10*/-khtml-user-select: none; /*早期浏览器*/user-select: none;} 也…

css font-family 字体全介绍，\5b8b\4f53 宋体随笔

font-family采用一种"回退"的形式来保存字体,可以写若干种字体.当第一种字体浏览器不支持的时候,会找第二种字体,一次类推. font-family字体分为两类: 特殊字体系列:就是具体的每种字体,如:宋体.Times New Roman等通用字体系列:代表的是相似的一类字体.css规定的通用字体类型有5种,serif.sans-serif.monospace.cursive.fantasy 5种,通常浏览器都会支持每种通用字体里的一种字体,不支持的很少. 因此,font-f…

CSS那些事儿-阅读随笔3（清除浮动）

浮动主要是由浮动(float)属性导致的页面错位现象,清除浮动不仅能解决页面错位的现象,还可以解决子元素浮动导致父元素背景无法自适应子元素高度的问题.在CSS样式中,主要利用clear属性中的both.left和right 3个属性值清除由浮动产生的左.右浮动效果. 一.浮动现象例子下面举一个很简单的浮动的例子,假设一个float_box(背景色为#aff)中包含两个div,且一个是左浮动(float:left),另一个是右浮动(float:right).在float_box外再添加一个没有浮…

CSS那些事儿-阅读随笔2（选择符的组合与优先级/权重）

在知道了CSS选择符最基础的知识后,就要综合利用它们了.这里就记录几种常见的用法. 1.针对性的使用类选择符或者ID选择符类选择符在一个页面中可能会在不同的地方应用,那么就需要有针对性地使用类选择符.如下例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css-test</title> <st…

CSS那些事儿-阅读随笔1（CSS简介与选择符）

最近开始详细钻研CSS有关的知识,参考资料是<CSS那些事儿>.将把在此过程中的收获进行记录,方便以后的学习. 一.CSS简介 1.什么是CSS CSS全称为Cascading Style Sheet(层叠样式表),是一种不需要编译的标记性语言,用于增强控制网页样式并允许将样式信息与网页内容分离.可以使用如何一种文本编辑器对其进行编辑. 2.CSS的作用 a.修饰页面文本.图片等元素,避免使用不必要的HTML元素. b.更有效地控制页面结构.页面布局(DIV+CSS). c.提高开发和维护效率…

CSS background-position随笔

1.定义和用法 background-position 属性设置背景图像的起始位置. 这个属性设置背景原图像(由 background-image 定义)的位置,背景图像如果要重复,将从这一点开始. 提示:您需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作. 默认值: 0% 0% 继承性: no 版本: CSS1 JavaScript 语法: object.style.backgroundPos…

css小随笔

一.什么是CSS W3C标准中,倡导有3:其一为内容与表现分离,其二为内容与行为分离,其三为内容结构的语义化.其倡导中第一条的"表现"指的便可以说是CSS.CSS全称Cascading Style Sheets,中文名为层叠样式表,是一种用来表现HTML等文件样式的计算机语言. 二.引入CSS三种样式 1.行内样式表:在HTML标签中,使用style=""的形式引用缺点:不符合W3C关于内容与表现分离的要求.代码杂乱,不利于后期维护. 2.内部样式表:在head标…

CSS小随笔（三）浮动与定位

先来说一下CSS中的浮动一.浮动 1.标准流中的块级盒子,宽度将自动伸展为100%,而浮动的块级盒子,宽度不会自动伸展,而是由内容撑开 2.当一个盒子浮动,标准流中未浮动的其他盒子,将视浮动盒子不存在而占据浮动盒子原来的位置.(浮动盒子,会盖在这个盒子的上方) 但是,未浮动盒子中的文字内容,将会受到浮动盒子宽度的影响.(未浮动盒子中的内容,不会被浮动盒子盖住) 3.由于第二条的原因. 可以给收影响的盒子,添加clear属性,清除掉浮动盒子对自身的影响 clear可选值:left-清除左浮动影响…

html随笔CSS(^__^)

控制文本显示字数,超过规定的文本长度 x显示... white-space:nowrap; //规定不能换行 overflow:hidden; text-overflow:ellipsis; //超出长度,“...”显示 width:320px; 设置 div内div居中显示(此方法中的display:flex 为较高版本的所以ie9 不兼容) 父层div加上css属性 display:flex; justify-content:center; align-item…

[前端随笔][CSS] 制作一个加载动画即帖即用

说在前面描述 [加载中loading...] 的动画图片往往使用GIF来实现,但GIF消耗资源较大,所以使用CSS直接制作更优. 效果传送门1 效果传送门2 关键代码 @keyframes 规则用于设定动画规则 <文档传送门> animation 属性用于设定动画 <文档传送门> transform 属性用于设定旋转角度 <文档传送门> 正文效果1的实现 </>部分:(只有一个div) <div class='dash-ring'>&l…

css grid 随笔

原文出自Arien的博客https://www.w3cplus.com/css3/line-base-placement-layout.html 首先定义一个网格 1.可以给父容器的display属性设置为grid或者inline-grid来定义一个网格.这样你就可以使用grid-template-columns和grid-template-rows属性来创建一个网格. .wrapper { display: grid; grid-template-columns: 100px 10px 100…

html&css&js随笔-问题集锦

1.IE6/7不支持display:inline_block属性:(解决办法) ;*display:inline;} 给元素增加*zomm和*display即可: 2.IE监听事件与W3C标准不一致: IE9以上已支持标准监听事件:addEventListener. attactEvent为IE特有监听事件,下面有个点击事件的兼容demo: function addEvent(dom,type,arg){ if(window.addEventListener){ dom.addEventList…

【css随笔1】的更多相关文章