10.20

最新推荐文章于 2025-10-22 22:59:59 发布

原创最新推荐文章于 2025-10-22 22:59:59 发布 · 155 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#搜索框

培训博客专栏收录该内容

4 篇文章

订阅专栏

本文分享了在网页设计过程中的实用技巧，包括如何防止用户拖拽图片、使用百分比设置div宽度保持响应式布局，以及实现搜索框和对齐多层div的方法。通过老式布局方法遇到的挑战，如不断定位元素，引出了学习flex布局的重要性。

培训

听迟总讲上周作业感觉收获满满，见识了一些骚操作，比如如何让用户拖到不了图片，无法选中文字等等。还知道要用百分比来设置div的宽度，这样页面缩小的时候div就不会往下掉。

作业

这次作业还没有学会flex布局，用的老方法，结果写网页一直在定位、定位、定位…以后学习flex布局后看看会不会方便些。这次作业好像没用什么新东西，就有两点：
1.如何在页面里实现搜索框
2.如何使每一层的div们左右对齐
解决办法：
1.`

<FORM method="GET" action="http://www.google.com/search">    
 <input type="hidden" value="GB2312">    
 <input type="hidden" value="GB2312">    
 <input TYPE="hidden" VALUE="zh-CN"> 
 <div>  
  <input TYPE="text" name="q" size="18" maxlength="255"  value="">      
  <button type="submit"><img src="image/search.png"></button>    
 </div>
</FORM>

` 2.我用的是一个超级繁琐的办法：给一层div的左侧div们设置一个父元素，再给这层div的最右侧div设置一个父元素，分别给这两个父元素加上float：left和float：right样式，然后再给左边的div加上margin-right样式，计算好每个div的宽度和margin-right的宽度就OK了。