H5+CSS写网页时遇到的一些坑(1)

1.英文换行问题,其实只是个英文单词的问题,需要在测试网页的时候留心一下

我们想要这样的效果,嗯,看起来很不错

结果把图片设置好了之后(float,大小什么的),兴高采烈的F5了一下,以为达到了预期效果,结果是这样的……

wtf,这和说好的不一样啊,然后我就开始debug了一晚上,从div嵌套检查到所有相关的CSS,结果还是找不出答案。

最后无意之中用一串中文代替了XXXXXX…………,结果成这样了:

??????一头雾水的我开始在网上找相关的资料……

结果发现了一个很重要的点:

CSS中添加word-break:break-all;即可使无法自动换行的一串字母自动换行,因为字母不会自动换行。

好吧,这个坑,记住了……

 

2.ul去掉前面的点点,这是我们经常遇到的一个问题,给出关键CSS属性:

ul{ list-style: none;},以及若要横向显示ul,只需把li浮动起来(float:left;)即可

 

3.很关键的一个点:我们都知道在CSS中布局是个非常非常重要的东西,所以我把今日踩过的坑罗列如下:

1.position:absolute的绝对定位是相对于其最近的一个position属性不为static的父元素。

2.position:fixed是绝对定位中的绝对定位,即相对于body进行绝对定位,常见用于广告的悬浮以及一定要悬浮显示的某些内容(小黄网?) 

3.position:relative不影响其他元素,即在其他元素眼中你并没有出轨,但是其实你已经出轨……了…… 

4.默认网页流布局从上到下从左到右

下面举个栗子,直接搞定这些点:

div1 div2 div3 进入文档流布局,div2(relative)进行相对布局

div2-1和div2-2位于div2下

其中div2-1(absolute)相对于其最近的一个position属性不为static的父元素进行绝对定位,即div2

div2-2(fixed)相对于body进行绝对定位

效果图:

 

over~

 

好的,下面是一个简单的示例: HTML代码: ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>女友相册</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <h1>女友相册</h1> </header> <main> <div class="gallery"> <img src="images/gf1.jpg" alt="女友照片1"> <img src="images/gf2.jpg" alt="女友照片2"> <img src="images/gf3.jpg" alt="女友照片3"> <img src="images/gf4.jpg" alt="女友照片4"> <img src="images/gf5.jpg" alt="女友照片5"> <img src="images/gf6.jpg" alt="女友照片6"> <img src="images/gf7.jpg" alt="女友照片7"> <img src="images/gf8.jpg" alt="女友照片8"> <img src="images/gf9.jpg" alt="女友照片9"> <img src="images/gf10.jpg" alt="女友照片10"> </div> </main> <footer> <p>版权所有 © 2021</p> </footer> <script src="script.js"></script> </body> </html> ``` CSS代码: ``` * { margin: 0; padding: 0; box-sizing: border-box; } header { background-color: #f1f1f1; padding: 20px; text-align: center; } .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 20px; padding: 20px; } .gallery img { width: 100%; height: auto; object-fit: cover; cursor: pointer; } .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.9); } .modal-content { margin: auto; display: block; max-width: 800px; max-height: 700px; } .modal-content img { width: 100%; height: auto; object-fit: contain; margin: auto; display: block; } .close { position: absolute; top: 20px; right: 30px; font-size: 30px; font-weight: bold; color: #f1f1f1; } .close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; } ``` JavaScript代码: ``` var modal = document.querySelector('.modal'); var modalImg = document.querySelector('.modal-content img'); var gallery = document.querySelector('.gallery'); gallery.addEventListener('click', function(event) { if (event.target.tagName === 'IMG') { modal.style.display = 'block'; modalImg.src = event.target.src; } }); var close = document.querySelector('.close'); close.addEventListener('click', function() { modal.style.display = 'none'; }); ``` 在这个示例中,我们使用了HTML来创建网页的基本结构,CSS来美化页面,并使用JavaScript来添加一些动态效果。其中,相册部分是使用了CSS Grid来进行排版,并使用了JavaScript来实现点击照片显示大图的功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值