【小练习01】CSS--PS提示框制作
生活随笔
收集整理的這篇文章主要介紹了
【小练习01】CSS--PS提示框制作
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
要求用css和HTML實現下圖效果:
代碼:
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>#wrap{width: 378px;border: 1px solid;border-color: #d4d0c8 #404040 #404040 #d4d0c8;margin: 0 auto;}#box{border: 1px solid;border-color: #fff #808080 #808080 #fff;background: #d4d0c8;padding: 1px;}#title{/*沒有給高度會取能容納內容的最小值,沒給寬度會取父級的寬度*//*font: 字體加粗 字體大小/字體行高 字體類型 后三個參數是必需要寫的*/font: bold 12px/18px '宋體';color: #fff;background: url(img/bg.gif) repeat-y;padding-left: 2px;}#content{font: 12px/14px '宋體';padding: 12px 95px 21px 57px;background: url(img/ico_01.gif) no-repeat 10px 11px;}</style></head><body><div id="wrap"><div id="box"><div id="title">Adobe Photoshop CS4 Extended</div><div id="content">要在關閉之前存儲對 Adobe Photoshop 文檔“未標題-1”的更改?</div></div></div></body> </html>源代碼鏈接地址:
http://download.csdn.net/detail/baidu_37107022/9835705
總結
以上是生活随笔為你收集整理的【小练习01】CSS--PS提示框制作的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 一天搞定CSS:盒模型content、p
- 下一篇: 【小练习02】CSS--网易产品