2. 程式人生 > >HTML+CSS的一些程式碼

HTML+CSS的一些程式碼

阿新 • • 發佈：2019-01-11

1）畫三角形

<!DOCTYPE>
<html>
<head>
<title>
三角形
</title>
<style>
div{
	width:0px;
	height:0px;
	border-top:50px solid black;/*通過把邊畫粗來實現畫三角形的效果*/
	border-left:29px solid transparent;
	border-right:29px solid transparent;
	margin:0 auto;/*讓三角形居中，比較好觀察*/
}
div:hover{
	border-top:0;
	
 
border-bottom:50px solid red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>


相關推薦

html css一些基礎知識點的整理

淺顯的名詞解釋 html：即HyperText Markup Language，超文字標記語言。 css：即Cascading Style Sheets，層疊樣式表。 JavaScript：也稱為ECMAScript，廣義上包括ECMAScript，DOM，

前端頁面檔案拖拽上傳模組html/css/js程式碼示例

最近給衛生局做一個表格上傳/視覺化系統，算是小有成果。今天把專案中的檔案拖拽上傳模組分離出來，做了一個獨立的小demo,並把相關程式碼打包上傳到了我的github中，為了其他學習者和開發者提供拙見。 由於程式碼中我的註釋很詳盡，所以具體邏輯實現及不介紹

網頁導航欄 html + css的程式碼實現

一般來講，我們的網頁導航欄是這麼個模式來構建在結構上：1.首先我們需要給導航欄的div 給個類名 一般為nav2.然後就是一個無序表格 3.由於導航欄的文字一般都是連結用來跳轉頁面 要在li裡面包含一個a <div class="nav"> <ul&

用php過濾網頁中所有的html,css,js程式碼

<?php $search = array ( "'<script[^>]*?>.*?</script>'si", // 去掉 javascript "'<style[^>]*?>.*?</style>'si

Sublime text 3 如何格式化HTML/css/js程式碼

使用Sublime text 3 編寫程式碼是一種享受，使用Sublime text 3 格式化HTML程式碼，需要安裝外掛，具體安裝步驟如下： 1、開啟選單->首選項->外掛控制，輸入 install package2、等待程式進入外掛管理功能，再輸入外掛名稱

HTML+CSS的一些程式碼

1）畫三角形 <!DOCTYPE> <html> <head> <title> 三角形 </title> <style> div{ width:0px; height:0px; border-top:50px

一些常見html css遇到的問題

手型 logs ie6 str 垂直居中 問題 strong point gif 1、讓容器內文字不管是單行還是多行始終垂直居中 解決：css無法直接控制，用js實現 2、IE上超鏈接使用絕對定位後失效 解決辦法：（1）使用position:relative而不是pos

html/css/js-個人容易忘的一些屬性

　　1.當div裡面的文字超過給定div給定的寬度，div裡面的文字自動換行 　　　word-break:break-all；會截斷改行最後的單詞            word-wrap:break-wo

HTML+CSS：掌握css的繼承以及程式碼的優先順序問題

上邊文章我們說了使用css的三種不同的選擇器，本篇文章我們主要介紹css的繼承規則以及css程式碼的權重優先順序問題。 （1）css的繼承規則 CSS的某些樣式程式碼是具有繼承性的，那麼究竟什麼是繼承呢？繼承是一種規則，它允許樣式不僅應用於某個特定html標籤元素，而且應用於其後代。比

HTML+CSS基礎學習標籤程式碼

HTML基礎 一、HTML頁面結構 1.HTML定義 （HTML）為超文字標記語言，是寫給瀏覽器的語言， 目前網路上應用最廣泛的語言，目前已經更新到HTML5，HTML添加了一些寫的語義化標籤，放棄了一些舊標籤。目的是相容所有以往標籤編寫的網頁。可以更加優良的識別。應用。  2.HTML

【HTML&CSS】搜狐頁面程式碼編寫

<!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <htm

Zen Coding: 一種快速編寫HTML/CSS程式碼的方法

請尊重版權，轉載請註明來源！ 在本文中我們將展示一種新的使用仿CSS選擇器的語法來快速開發HTML和CSS的方法。它由Sergey Chikuyonok開發。 你在寫HTML程式碼(包括所有標籤、屬性、引用、大括號等)上花費多少時間？如果你的編輯器有程式碼提示功能，你編寫的時候就

Emmet：HTML/CSS程式碼快速編寫神器

Emmet的前身是大名鼎鼎的Zen coding，如果你從事Web前端開發的話，對該外掛一定不會陌生。它使用仿CSS選擇器的語法來生成程式碼，大大提高了HTML/CSS程式碼編寫的速度，比如下面的演示：    Zen coding下的編碼演示 去年年底，該外掛已經改名為Em

HTML+CSS PC端 手機端 公用部分樣式程式碼整理

1、css常用公用部分樣式程式碼整理:body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,  li, dl, dt, dd, form, a, fieldset, input, th, td  {mar

HTML/CSS——移動端Meta標籤的一些設定

head標籤是html的頭標籤，對於移動端的開發，head標籤裡面有很多我們值得注意的地方。Meta標籤就是屬性設定 <!DOCTYPE html> <html lang = ""&

在Eclipse下編寫HTML/CSS/JS/JSP/Java程式碼時，程式碼自動提示的相關設定

最近在做一個javaweb的專案，在eclipse中編寫jsp程式碼時沒有程式碼提示確實讓人很蛋疼，之前一直寫Java程式碼或者在Dreamweaver中寫HTML程式碼時自動提示程式碼用起來特別爽，這突然間沒有程式碼提示真的很難受，所以上網找了下相關解決辦法，綜合一下完美的解決問題。 我們平時

學習總結HTML CSS JAVASCRIPT，對三劍客的一些理解

網頁設計一般用到三大技術 html ,css ,javascript； HTML： 相當於一個文件，裡面是要給使用者的資訊。使用他提供的一些標籤，來把你想傳遞給使用者的資訊進行合理編排，使資訊更好的傳遞給使用者。 CSS: 相當於把這個文件進行修飾，美化實

編寫高質量前端程式碼——HTML&CSS篇

    最近剛讀完《編寫高質量程式碼——Web前端開發修煉之道》，趕緊總結鞏固下記憶，也方便平時查閱。     1、結構、樣式和行為分離         這個不用多說，現在也是這樣編碼的。在此基礎上，還要做到精簡、重用、有序。用更少的程式碼實現更多功能，避免重複編碼，經常用

html+css+table一些比較漂亮的表格

各種不同樣式的css+table 效果圖 具體的html檔案 <table id="hor-minimalist-a" summary="Employee Pay Sheet"> <thead> <tr>

HTML+CSS程式碼橙色導航選單

1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>超漂亮的HTML導航選單CSS程式碼 - 何問起</tit