當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（边框，阴影，浮动）

發布時間：2025/3/19 HTML 22 豆豆

生活随笔收集整理的這篇文章主要介紹了黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（边框，阴影，浮动）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一、基礎班學習路線

三、CSS3基礎

1.綜合案例-快報模塊

以上為使用了盒子的底邊框后又使用margin的悲劇效果（右邊那個才是整個盒子），所以要用padding，又因為h3沒有寫寬度屬性，所以給它一個左右的padding不會撐大

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box {width: 248px;height: 163px;border: 1px solid #ccc;margin: 100px auto;}li {list-style: none;}.box h3 {height: 32px;border-bottom: 1px dotted #ccc;font-size: 14px;font-weight: 400;line-height: 32px;padding-left: 15px;}.box ul li a {font-size: 12px;color: #666;text-decoration: none;}.box ul li a:hover {text-decoration: underline;}.box ul li {height: 23px;line-height: 23px;padding-left: 20px;}.box ul {margin-top: 7px;}</style> </head><body><div class="box"><h3>品優購快報</h3><ul><li><a href="#">【特惠】爆款耳機5折秒！</a></li><li><a href="#">【特惠】爆款耳機5折秒！</a></li><li><a href="#">【特惠】爆款耳機5折秒！</a></li><li><a href="#">【特惠】爆款耳機5折秒！</a></li><li><a href="#">【特惠】爆款耳機5折秒！</a></li></ul></div> </body></html>

2.圓角邊框

3.盒子陰影

4.文字陰影

5.CSS浮動

傳統網頁布局的三種方式

標準流：

以上兩張圖的讓盒子里面內容一左一右和滾動網頁時搜索框固定都不能用標準流做出

為什么需要浮動

什么是浮動

浮動特性-脫標

浮動特性-浮動元素一行顯示

浮動特性-浮動元素具有行內塊特性

浮動元素經常搭配標準流的父元素

浮動布局練習

常見的網頁布局

浮動的兩個注意點

為什么清除浮動

清除浮動本質以及額外標簽法

清除浮動元素之父元素overflow

清除浮動之after偽元素

清除浮動之雙偽元素

清除浮動總結

總結

以上是生活随笔為你收集整理的黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（边框，阴影，浮动）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：黑马程序员pink老师前端入门教程，零基
下一篇：黑马程序员pink老师前端入门教程，零基