自制页面小记

Posted 2020-06-14

刚开始写html真的不太适应，比想象中的难。这回的网页虽然做的挺简陋不过确实能写出想要的效果，而且已经熟悉了套路。下面记录一些用法。

CSS:

　　导入css

　　　　<link rel="stylesheet" type="text/css" href="E:\pyFiles\html\console\window.css" >

　　获得光标

　　　　someElement:hover

　　在标签后添加内容

　　　　someElement：after{

　　　　　　content:　　

　　　　}

 

　　边框阴影

　　　　box-shadow: 0 2px 8px 2px rgba(0,0,0,0.12);

 

　　粗体

　　　　font-weight:bold

　　去掉ul.li中的点

　　　　list-style:none

　　字体：微软雅黑

　　　　font-family: ‘Microsoft Yahei‘,‘SimHei‘

　　最小高度：

　　　　min-height

　　不可见

　　　　visibility: hidden

　　合并边框，设置单一边框

　　　　border-collapse: collapse;

 

　　设置背景图片：

　　　　background: url(../images/....png) no-repeat;

　　　　　　no-repeat:不填充

　　　　　　repeat-x：横向填充

　　　　　　repeat-y:纵向填充

 

　　清除两端float，防止把父类飘没了

　　　　<div style="clear:both;"></div>　

 

　　设置行高 

　　　　line-height:

 

　　相邻单元格边框的间距

　　　　border-spacing: 0;

　　

　　滚动条

　　　　overflow：auto

　　　　overflow:clear 超过滚动清除

　　透明度

　　　　opacity：0.5：chrome 透明度从0-1

 

　　div层：z-index越大越在上面

 

　　位置：position

　　　　fixed 固定在浏览器窗口 left，top等来定位

　　　　relative 相对位置　

　　　　absolute 绝对位置，相对于浏览器的位置。在relative后为相对的位置。有时在div下也是相对div的位置

 

JQuery：

　　核心：找到元素，操作元素

　　

　　框架加载完成后执行函数：

　　　　$(document).ready(function(){});　　其他的函数都应用写在这里面

　　导入jquery

　　　　<script src="../js/jquery-1.8.2.min.js"></script>

　　

　　获得对象的值:

　　　　someElement.val();

　　

　　隐藏/显示标签：

　　　　someElement.hide();

　　　　someElement.show();

　　　　someElement.toggle();　　　　切换隐藏与显示

 

　　获得元素的熟悉：

　　　　someElement.attr("..");

　　设置元素的属性：

　　　　someElement.attr("name","liqx");

　　

　　判断元素是否隐藏

　　　　if(someElement).is(":hidden")){};

　　　　if(someElement).is(":visible")){};

 

　　为对象添加或删除一个样式

　　　　someElement.addClass().removeClass();

 

　　跳转到某个页面

　　　　location.href=‘some.html‘;