HTML+CSS制作百度首页

最新推荐文章于 2023-06-14 20:24:28 发布

weixin_44281184

最新推荐文章于 2023-06-14 20:24:28 发布

阅读量298

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/weixin_44281184/article/details/104573923

版权

<html> 

<!--  <title> 元素可定义文档的标题   -->
<title>WINNIE</title>

<head>
<style type="text/css">

<!--  #id 选择器：为 id="d1" 的元素设置样式   -->

   #d1{
      position: absolute;   
	  right:10px;
   }
   
   <!--  position:absolute 绝对定位   -->
   
   #d1 ul{       
	  list-style: none;
   }
 
   <!--  ul:无序列表   -->
   
   #d1 a{         
      font-family:"微软雅黑";
	  color:black;      
	  font-size:13px;    
   }
   <!--   <a> 标签定义超链接    -->
   <!--  color 字体颜色   -->
   <!--  font-size 字体大小 px为像素   -->
   
   #d1 li{         
     float:left;     
	 margin-left:18px;    
	 text-align:center;   
   }
 <!--  li:列表项目  -->
 <!--  float 属性实现元素的浮动  -->
 <!--  margin-left:设置元素的左外边距 -->
 <!--  text-align:center内容居中对齐 -->

   #d1 input[type="button"]{  
       background-color: #3388FF;
	   border-bottom:none;  
	   border-left:none;
	   border-right:none;
	   border-top:none;
	   color:white;  
   }
   <!-- input:创建按钮  -->
   <!-- border-bottom:设置下边框的样式 -->
   
   
   #d1 input[type="button"]:hover{  
       cursor:pointer;  
   }
   <!-- :hover :选择鼠标指针浮动在其上的元素，并设置其样式-->
   
   #d2{
      position:relative;
	  text-align:center;
	  top:100px;
   }
   #d2 input[type="text"]{
	  width:550px;
	  height:32;
	  margin-top: 41px;
	  font-size:20px;
	  border-width:1px;
      background-image:url('C:/Users/DELL1/Desktop/3.png');
	  background-repeat:no-repeat;
	  background-position:right;
   }
   #d2 input[type="submit"]{
      width:125px;
	  height:32;
      background-color:#3388FF;
	  font-size:120%;
	  color:white;
      border:none;
   }
   #d3{
      position:relative;
	  top:280px;
	  text-align:center;
	 
   }
   #d4{
      position:relative;
	  top:281px;
      text-align:center;
	  margin:12px;
   }

   #d4 a{
       color:#C0C0C0;
	   font-size:5px;
   }
   #d4 p{
       color:#C0C0C0;
	   font-size:5px;
	   
   }
</style>
</head>

<body>
  <div id="d1">
      <div align="center">
  <ul>
       <li><a href="http://news.baidu.com/" >新闻</a></li>
	   <li><a href="https://www.hao123.com/">hao123</a></li>
       <li><input type="button" value="更多产品"></li>    
  </ul>
	  </div>
  </div>

  <div id="d2">
       <a href="https://www.baidu.com/"><img src="C:\Users\DELL1\Desktop\1.png"></a>
	   <form>
	       <input type="text">
		   <input type="submit" value="百度一下">
	   </form>

  </div>

  <div id="d3">
    <img src="C:\Users\DELL1\Desktop\4.png" >
  </div>
  
  <div id="d4" align="center">
	<a href="https://www.hao123.com/">把百度设为主页</a>
	<a href="https://www.hao123.com/">关于百度</a>
	<a href="https://www.hao123.com/">About Baidu</a>
	<a href="https://www.hao123.com/">百度推广</a>
	 <br>
    <p>@2020 Baidu&nbsp;<a href="https://www.hao123.com/">使用百度前必读</a>
	<a href="https://www.hao123.com/">意见反馈</a>
    京ICP证030173号</p>
  </div>

	
</body>
</html>

效果如下：
在这里插入图片描述 - 武汉加油！

weixin_44281184

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS制作百度首页

<html> <title>WINNIE</title><head><style type="text/css"> #d1{ positi...
复制链接

扫一扫