2. 程式人生 > >html-css練習題（系統提示）

html-css練習題（系統提示）

阿新 • • 發佈：2018-12-25

程式碼賞析： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> /* 背景顏色設定 */
body{ background:lavenderblush; } /* 1.盒子設定 寬500 高300 背景顏色 固定位置 調節位置 */ .box{ width:500px; height:300px; background: white; border-radius: 4px; position: relative; left:50%; top:50%; margin-left:-250px; margin-top: 150px; /* 設定塌陷 */ overflow:hidden; } /* 2.系統盒子設定 寬490 高40 背景顏色 位置 */ .con{ width:490px; height:40px
; background: blue; margin: 15px auto 0px; border-radius: 6px; } /* 2.1設定系統提示文字 左懸浮 字型18 去粗 顏色 行高 */ .con h3{ float:left; margin:0px; margin-left:10px; line-height: 40px; color:#fff; font-size:18px; font-weight: normal; } /* 2.2 設定右邊邊框 右懸浮 字大小 下劃線 位置 */ .con a{ float:right; width:20px; height:20px; background
: #fff; margin:10px 10px 0 0 ; text-decoration: none; line-height: 20px; text-align: center; font-size:20px; border-radius: 4px; } /* 3.中間文字 行高 字20 位置 */ .span{ height: 200px; text-align: center; line-height: 200px; font-size:20px; } /* 4.底部設定 行高54 寬500 位置 上邊框 */ .regist{ width:500px; height: 54px; padding-top:5px; border-top: 1px solid red; } /* 4.1 輸入盒子設定 寬100 高36 右浮動 字16 位置 */ .regist input{ width:100px; height:36px; float:right; border-radius:4px; font-size:16px; margin:0 10px 0 0 ; } </style> </head> <body> <!-- 1.搭建盒子 --> <div class="box"> <!-- 2.系統提示盒子 --> <div class="con"> <h3>系統提示</h3> <a href="#">×</a> </div> <!-- 3.中間文字 --> <div class="span">親，確定這麼做嗎？</div> <!-- 4.底部盒子 --> <div class="regist"> <input type="button" value="取消"> <input type="button" value="確定"> </div> </div> </body> </html>

相關推薦

html-css練習題（系統提示）

程式碼賞析： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

html-css練習題（天天生鮮靜態網頁製作）

先來看一下效果圖： 主要要求： 注：最下面有素材連結地址可以自己練習使用 /* 1.login最外側盒子設定高29 背景顏色#f7f7f7 下邊框1 */ /* 1.1 login內容部分

HTML+CSS+JS（面試題）

pagex innerhtml ado 傳值 優缺點 釋放 如何 blog 們的 1、 你做的頁面在哪些流覽器測試過？這些瀏覽器的內核分別是什麽? IE: trident內核 Firefox：gecko內核 Safari:webkit內核 Opera:以前是presto內核

前端HTML 與css 整理（未完）

簽名 跳轉 doc emp 分類 for ... 小寫 tar HTML 中的標簽存放於文本文件中 需要按照以下固定的文檔結構組織：<!DOCTYPE HTML><html> <head>頭部相關信息 </head>

html和css註釋（了解）

nbsp 計算機 所有 ref 能夠 程序 color href 什麽 什麽是註釋？ 註釋是在所有計算機語言中都非常重要的一個概念，從字面上看就是註解，解釋的意思 註釋可以用來解釋某一段程序或者某一行代碼是什麽意思，方便程序員之間的交流 為什麽要使用註釋？ 適當的註

Web前端之HTML+CSS基礎（二）

CSS Cascading Style Sheets  疊層樣式表 隨著HTML的成長，為了滿足頁面設計者的要求，HTML添加了很多顯示功能。但是隨著這些功能的增加，HTML變的越來越雜亂，而且HTML頁面也越來越臃腫。於是CSS便誕生了。 CSS不僅可以靜態地修飾網頁

HTML+CSS基礎（七）：CSS選擇器

每一條css樣式宣告（定義）由兩部分組成，形式如下： 選擇器{ 樣式; } 在{}之前的部分就是“選擇器”，“選擇器”指明瞭{}中的“樣式”的作用物件，也就是“樣式”作用於網頁中的哪些元素。 標籤選擇器 標籤選擇器其實就是html程式碼中

html實戰之一（利用html+css做一個靜態頁面）

參照一般部落格的樣子，做了個超簡易版，先秀一下樣子 html1 很明顯主體部分是三個模組，頂部左側和右側div 寫的過程中客服的幾個問題： 1.參照了w3school的樣子，固定主體寬度，調整瀏覽器時，保持最小寬度 html {   width: 966px;   ba

BootStrap-CSS樣式_佈局元件_徽章（訊息提示）

 Bootstrap 徽章（Badges）：徽章與標籤相似，主要的區別在於徽章的邊角更加 圓滑。 徽章（Badges）主要用於突出顯示新的或未讀的項。如需使用徽章，只需要把 <span class="badge"> 新增到連結、Bootstrap 導航等這些元素上即可

Html CSS學習（五）position定位 原

　　Html CSS學習（五）position定位　　　　position用來對元素進行定位，其值有以下幾種：　　　　static：無特殊定位，物件遵循正常文件流，top，right，bottom，left等屬性不會被應用。　　　　relative：物件遵循正常文件流，但將依據top，right，bottom

前端基礎HTML+CSS+JS（期末複習用）

前端技術：1、HTML/H5 認識並熟悉一些常用的標籤  1)網頁結構  2)圖img、文p pre h1-h6 font(h5過時)、視訊 <video> 、音訊 <audio>   3）表格  4）表單/表單屬性（特別常用）     input 

基於python-flask搭建後臺，HTML+CSS+JS（jQuery）寫前端的web全棧開發（三）——3.2 普通按鈕點選事件與後臺互動

    在上一篇文章，我們講解了基於外掛實現的上傳圖片到後臺處理，並將處理後得到的結果圖與原圖在前端顯示。    主要idea是將圖片先在後臺進行快取，我們傳回兩張圖片的途徑，在file的done函式中對<img/>標籤的src屬性進行更新。    但是這樣子存在

讓你的eclipse實現寫JAVA代碼，HTML,CSS,JAVASCRIPT代碼提示

css ref win imp center asc java代碼 char 保存文件 　　1.打開eclipse→Windows→Preferences→Java→Editor→Content Assist 　　改動Auto Activation triggers f

zabbix web 登錄成功後提示（紅色提示）：zabbix server is not running:the information displayed may not be current

aid blog sed 地址 成功 current use schema clas 原因是我配了外網地址因應是內網的： # cat /etc/zabbix/web/zabbix.conf.php <?php // Zabbix GUI configuration

CSS學習（十四）-CSS顏色之中的一個

rac 顏色 opacity bsp pac pre alpha color data- 一、理論： 1.RGB色彩模式 a.CMYK色彩模式 b.索引色彩模式 (主要用於web) c.灰度模式 d.雙色調模式 2.opacity: a.alphavalue:透明

linux雲自動化運維基礎知識22（系統恢復）

linux系統引導過程概述:通電——bios初始化——grub2磁盤引導階段——grub2文件引導階段——指定boot分區所在位置——啟動內核，只讀/掛載設備——啟動init程序進入初始化階段——啟動systemd初始化進程——取/etc/systemd/中的文件——啟動程序——啟動登陸環境。系統啟動流程：一

38）PHP，獲取數據庫數據並在html中顯示（晉級5）

lis java語言 分享 比賽 meta 用戶名 gen fun etc 首先是我的文件關系： 我的主php文件是index.php，我的配置文件php是BBB.php 我的數據庫操作文件是 b.php 我的html文件是login.html 我的index.

web前端【第一篇】HTML基礎一（標簽）

lpad 百度 合並單元格 div gpo a標簽 適合 code words 一、初始html 1.web服務本質 import socket sock=socket.socket(socket.AF_INET,socket.SOCK_STREAM) sock.bin

後端list集合中的數據傳遞到前臺HTML中顯示（表格形式）

UNC 姓名 char 響應 防止 數據 前端 格式 ble 關鍵字：web項目中前後臺數據傳遞問題 在學習web項目的過程中，我們肯定會遇到前後臺數據交換問題。這個問題我也思考了很久，今天借此總結一下。由於博主水平有限，如有不當之處，還請大家多多指正，，廢話

python(第四版閱讀心得)（系統工具）（一）

pro rename _id multi temporary inter path 運行 pid 本章將會講解python常用系統工具的介紹 python中大多數系統級接口都集中在兩個模塊: sys 和 os 但仍有部分其他標準模塊也屬於這個領域 如： 常見： glob