[html+css]小结

一:html行内标记使用=

1.font文本三标记

<h1 align="center"><font face="微软雅黑"  color="blue" size="2" >标题</font><h1>

2.相似的还有<hr/>水平线

<hr 属性="属性值"/>三标记+width

3.文本个格式

<strong></strong><em><del><ins>

二:css标记使用:

css样式的三种写法

1.   行内式 在标签中style属性

2.   内嵌样式<style type="text/css"></style>,写在head标签中的style 标签里

3.   引入外部css样式文件

<link href="文件路径" rel="stylesheet" type="text/css"/>

<link href="css/style.css" type="text/css" rel="stylesheet"/>

选择器与类

p{}    .zero{}

css字体设置:

1.font-size,font-family,font-family,font-weight(normal,bold,bolser),color

2.letter-spacing字间距   word-spacing单词间距   line-height:行间距   text-transform:文本转换

text-decoration:文本装饰 (underling:下划线  overline :上划线 line-through:删除线)

text-align:水平对齐方式(left 左对齐  right  center)   text-indent:首行缩进

3.背景颜色:background-color:red;

background 可以设置 背景颜色、背景图片、定位等 ;
而background-color 只能设置 背景颜色 ,设置时仅仅改变了背景色,但此时有一个默认的的background:repeat;

而设置background: #aaa;后,相当于同时设置了background:no-repeat;
既{background-color: #aaa;background:no-repeat;}=={background: #aaa;}

repeat两个方向平铺

 <img style="width:100%;height:100%;" src="images/my.png" />

4.层叠等级z-index:序号,取值越大越上层,默认为0

5.锚点连接:<a href="#id">连接文本</a>

超链接标记:

1.a:link{ }  2.a:visited{}  3.a:hover{}  4.a:active{}

6.表单input控件与类型

渐变

  /*背景色渐变*/
     background: linear-gradient(to bottom right, #F56739, #FB9749);

css三种写法

使用frameset实现全页跳转:加上target="_top"

 <a href="orderface.jsp" target="_top">确认提交</a>

 margin:1px auto;div内盒子居中

定义

两行文字基线之间的距离。

行高示意图:

image

html怎么不显示滚动条 但鼠标滑轮可以控制向下滚动

1.

添加样式
::-webkit-scrollbar{
display:none;
}

2.

看到好多人还是一知半解的,其实回答者给出方案了,就是改变滑动条样式,去掉它背景色;

CSS:
元素名::-webkit-scrollbar{
width: 2px;
background: none;
}

背景全填充

https://blog.csdn.net/u011846249/article/details/78283844

感谢大佬

三、JavaScript实现跳转

https://www.cnblogs.com/gh0408/p/6323631.html

3.1俏皮

<body>
    <script language="javascript">
        str=new Array("你受骗了","你真的受骗了","真笨呀");
        while(true){
            for(i=0;i<str.length;i++){
                window.alert(str[i]);
            }
        }
    </script>
    
</body>

window.alert("内容");出现消息框

window.confirm("内容");确认框

window.prompt                                                                                                                                                                                    ("内容");输入框

3.2弹窗与history前进后退

<body>
    <script type="text/javascript">
        window.status="出现新窗口";
        // newWindow=window.open("window1.html","new1","width=300,height=300,top=500,left=500,toolbar=1,location=1,status=1,menubar=1,scrollbars=1,resizable=1,");
        newWindow=window.open("window1.html","new1","width=300,height=300,top=500,left=500");
        // newWindow.close();
    </script>
    <a onclick="history.forward()">前进</a>
    <a onclick="history.back()">后退</a>
    <a onclick="window.history.go(n)">后退</a>
</body>

3.3document对象

1.document.writeln("你好");

2.document.子元素.元素名还有之前那个js

发布了27 篇原创文章 · 获赞 5 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/qq_38304672/article/details/93906637