1. 程式人生 > >按鈕圓角設定、html基礎css引入

按鈕圓角設定、html基礎css引入

1、按鈕圓角設定

.button{

      display: inline-block;
    position: relative;
    margin: 10px;
    text-decoration: none;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 7px;

}

2、基礎css引入(基礎樣式真的特別重要,如果基礎檔案設定出現問題,很容易出現樣式設定不顯示或者變形,所以必須首先引入一個基礎設定檔案)

/***匯入基礎檔案**/
@charset "utf-8";
/* reset */
body,div,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,figcaption,figure,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
html{font:normal 62.5%/1 "microsoft yahei",'HelveticaNeue',sans-serif;color:rgba(0,0,0,1);-ms-text-size-adjust: none;-webkit-text-size-adjust:none;height:100%;}
body{height:100%;}
a{background-color:transparent;text-decoration:none;}
h1,h2,h3,h4,h5,h6,th,em{font-weight:normal;font-style:normal;}
ul,ol{list-style-type:none;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
video,audio,canvas{display:inline-block;}
[hidden],template{display:none;}
a:focus{outline:thin dotted;}
a:active,a:hover{outline:0;}
abbr[title]{border-bottom:1px dotted;}
b,strong{font-weight:bold;}
dfn{font-style:italic;}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}
mark{background-color:rgba(255,255,0,1);color:rgba(0,0,0,1);}
img{border:0;vertical-align:middle;}
fieldset{border:1px solid rgba(192,192,192,1);margin:0 0.2rem;padding:0.35em 0.625em 0.75em;}
legend{border:0;padding:0;}
input,select,textarea,button{outline:none;border:none;font-family:inherit; font-size:0.28rem;}
button,input{line-height:normal;border:none;}
input[type="text"],input[type="password"]{autocapitalize="off";}
button,select{text-transform:none;}
button,input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;-moz-appearance:button;appearance:button;cursor:pointer;}
button[disabled],html input[disabled]{cursor:default;}
/*input[type="checkbox"],input[type="radio"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0;}*/
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
textarea{overflow:auto;vertical-align:top;}
/*table{border-collapse:collapse;border-spacing:0;}*/
/*select{-webkit-appearance:none;-o-appearance:none;-moz-appearance:none;-ms-appearance:none;-webkit-tap-highlight-color:transparent;}
*/


相關推薦

按鈕圓角設定html基礎css引入

1、按鈕圓角設定 .button{       display: inline-block;     position: relative;     margin: 10px;     text-decoration: none;     -webkit-border-ra

1HTML+DIV+CSS基礎快速入門到制作企業站視頻課程_2 html列表的用法

pre inf java src TP 入門到 超文本 技術分享 分享 0.無序列表 1.有序列表 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <m

1HTML+DIV+CSS基礎快速入門到制作企業站視頻課程_12 css邊框

技術分享 blue color 入門到 div 視頻 ted col ID 復合寫法: border: 2px solid red; 分開寫法: border-color: red; border-bottom-color: blue; border-bo

1HTML+DIV+CSS基礎快速入門到制作企業站視頻課程_20 css樣式作業

order 技術分享 enter -a bsp 樣式 over model ctype 1、HTML+DIV+CSS零基礎快速入門到制作企業站視頻課程_20 css樣式作業 1 <!DOCTYPE html> 2 <html lan

03html基礎學習筆記三---CSS中三種選擇器

CSS中三種選擇器:標籤選擇器、類選擇器、ID選擇器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <

針對iPhone的ptAndroid的dpHTMLcss像素與dpr設計尺寸和物理像素的淺分析

display 基本 stand 理解 android開發 height 請問 技術 -a   最近被一朋友問到:css中設置一DOM的height:65px,請問顯示的高度是否和Android的65dp的元素等高?腦子裏瞬間閃現了一堆的概念,如dpr,ppi,dp,pt等

HTML基礎

列表 按鈕 兩個 -s htm 合並 rip res 超鏈接 一、HTML基礎1、基本元素<p>,<a>,<img>,<h1>-<h6>,<br>,<hr>; &nasp

49html基礎認識&常用標簽(1)

擴展 cap logo 其它 一個 localhost oca .com 3.3 從今天期我們進入前端的學習,先學習html,沒有任何復雜難懂的邏輯需要燒腦,只需要記憶、練習、練習、練習。 一、HTML初識 1、web服務本質 import socket def m

從零開始學習前端開發 — 1HTML基礎

大小 lpad 文件夾 check 受限 安全性 瀏覽器兼容 列表 type 一、web標準 web標準-網頁制作的標準,它是由一系列標準組成的,主要包含三個方面: 結構(html,xhtml),表現(css),行為(javascript) 註:結構和表現的標準由w3

day48——HTML 列表HTML DIV+CSS

eee who 不同的 header 9.png 實踐 hist 圖片 gpo 一、無序列表 無序列表使用粗體圓點進行標記,無序列表始於 <ul> 標簽,每個列表項始於 <li> 1 <ul> #

1HTML基礎

width 段落 基礎 提示 www. 更多 pos post log HTML 標題: <h1>這是一個一級標題</h1> <h2>這是一個二級標題</h2> <h3>這是一個三級標題</h2>

Html5 學習筆記 --》html基礎 css 基礎

學習 ado itl doctype tran red 陰影 基礎 插圖 HTML5 功能 HTML5特點 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta

html基礎-CSS

lin 層級選擇器 NPU weight border 設置 pass pad 層級 1.id選擇器 #id1{ backgroud-color: } <div id="id1">1</div> 2.類選擇器 .c1{ backgro

HTMLCSS引入圖片並鋪滿背景

HTML程式碼如下 <!DOCTYPE html> <html>     <head>         <meta charset="UTF-8"> &nbs

JSHTMLCSS的註釋方法及作用

JS的註釋: //:表示單行註釋   如: // alert(typeof ("176")); /* *xxxx *xxxx */:表示多行註釋   如: /* * 定義一個放大的

02HTML 基礎

1、HTML 標題 HTML 標題(Heading)是通過<h1> - <h6> 標籤來定義的. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <

Eclipse建立JSPHTMLCSS檔案預設字符集設定成UTF-8

敘:在使用eclipse的時候總是發現新建立的JSP檔案、HTML檔案等預設總是ISO-8859-1,每次都要修改成自己使用的utf-8的,很是麻煩,因此在網上查看了一下發現是可以修改字符集的預設值的,具體方法如下; Eclipse建立JSP、HTML、CSS檔案預設字符集設定

HTML+CSS基礎知識學習筆記

注:如果早點了解那率性的你或者晚一點遇見成熟的我。學計算機的應該早點確定自己的技術方向,一定要有一個擅長的能夠用來吃飯的,其他的能掌握多少就是多少,像我這樣的什麼都學,什麼都不知道沒什麼卵用的。 1.HTML:Hyper Text Markup Language(超文字

html/css基礎篇——關於瀏覽器windowdocumenthtmlbody高度的探究

  首先說明本人所理解的這幾個元素的計算   window高度應當是文件所在視窗的可視高度(沒有包括瀏覽器的滾動條),計算方法document.documentElement.clientHeight   document高度應該為文件內容的高度,計算方法Math.max(document.body[ "

前端之路——第三篇:列表表單提交按鈕html佈局css的display,製造第一個表單提交案例

第三課了,今天知識點至關重要。 網頁常用的表單提交!!! 就這樣羅列下第三課的知識點吧,不搞水印圖片了。 1.有序列表:語法(<ol><li></li></ol>),<ol>標籤能讓瀏覽器預設帶出排序,教為少用