CSS练习

1、导航栏(横向)

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>title</title>
     <style>
		
		#div_nav {
			margin:auto;
			width:80%;
			border:2px solid #bbbbbb;
		}
		#nav {
			border:2px solid #bbbbbb;
		   margin:auto;
		  display:block;
		}
		
	   #nav li {
	       float:left;
		   list-style:none;
	 
	   }
	   
	    #nav li a {
	       width:97px;
		   height:22px;
		   display:block;
		   text-align:center;
		   text-decoration:none;
		  
	
	   }
	   
	    #nav li a:hover {
	       background-color:#bbbbbb;
		   color:#ffffff;
	   }
	   
	   
	 </style>
  </head>
  <body>
	<div id="div_nav">
		<ul id="nav">
			<li><a href="">首页</a></li>
			<li><a href="">文章</a></li>
			<li><a href="">参考</a></li>
			<li><a href="">博客</a></li>
			<li><a href="">论坛</a></li>
		</ul>
	</div>
	
    <script>
    
    </script>
  </body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

### 关于CSS练习题和学习资源 以下是关于CSS练习题和学习资源的相关建议: #### 1. 静态网页实践练习 通过实际操作来掌握HTML与CSS的基础技能是非常重要的。例如,在完成静态网页的页眉、页脚设计时,可以尝试使用更多复杂的布局技术[^1]。这不仅能够巩固基础语法,还能提升对响应式设计的理解。 #### 2. 精灵图的应用 精灵图是一种优化图片加载速度的技术,它将多个小图标合并成一张大图并通过`background-position`属性控制显示区域。这种技巧广泛应用于电商网站等需要频繁更新图像的地方,因此非常适合初学者深入研究并加以应用。 #### 3. 注册登录页面开发项目 对于新手来说,“某电商网站注册、登录页面”的制作是一个很好的综合训练机会[^2]。此过程涉及表单元素样式调整以及整体视觉效果的设计,有助于提高实战能力。 #### 4. HTML/CSS 牛客题库练习 牛客网提供了丰富的前端题目供学员练习,其中包括但不限于颜色设置、字体大小定义等内容[^3]。这些具体的实例可以帮助加深理解各种标签的作用及其对应的CSS规则。 #### 5. 页面结构案例分析 观察其他开发者如何构建简单的几何图形也能启发自己的创作思路[^4]。比如利用嵌套div实现正方形内的圆形展示就是一个不错的例子,从中我们可以学到层叠顺序、定位方式等方面的知识点。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Practice</title> <style> body { text-align: center; } #outer-box { width: 300px; height: 300px; background-color: blue; position: relative; margin: auto; } #inner-circle { width: 150px; height: 150px; border-radius: 50%; background-color: yellow; position: absolute; top: calc(50% - 75px); left: calc(50% - 75px); } </style> </head> <body> <div id="outer-box"> <div id="inner-circle"></div> </div> </body> </html> ``` 上述代码片段展示了如何创建一个蓝色背景下的黄色圆圈居中的场景,这对于熟悉盒模型概念非常有帮助。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值