【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

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章