首页 > 其他分享 >每日总结(2)

每日总结(2)

时间:2023-02-21 21:25:23浏览次数:50  
标签:总结 margin 每日 float height li border left

所学时间:4个小时

代码:110

博客:1

知识点:

css和html搭建基础页面,实现搜索框的美化,首页菜单项目鼠标聚焦,浮动

HTML

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>学成在线</title>
 6     <link rel="stylesheet" href="../static/css/index.css">
 7 </head>
 8 <body>
 9 
10             <!--头部-->
11 <div class="header wrapper">
12     <div class="nav">
13         <ul>
14             <li><a href="#">首页</a></li>
15             <li><a href="#">课程</a></li>
16             <li><a href="#">规划</a></li>
17         </ul>
18     </div>
19 
20         <!--    搜索  -->
21     <div class="search">
22         <input type="text" placeholder="请输入关键字">
23         <button></button>
24     </div>
25 </div>
26 </body>
27 </html>

CSS

 1         /*去默认格式*/
 2 *{
 3     margin: 0;
 4     padding: 0;
 5     box-sizing: border-box;
 6 }
 7 li{
 8     list-style: none;
 9 }
10 a{
11     text-decoration: none;
12 }
13 .clearfix:before,.clearfix:after{
14     content: "";
15     display: table;
16 }
17 .clearfix:after{
18     clear: both;
19 }
20 
21 body{
22     background-color: #f3f5f7;
23 }
24 .wrapper{
25    width: 1200px;
26     margin: 0 auto;
27 }
28 .header{
29     height: 42px;
30     /*background-color: pink;*/
31     margin: 30px auto;
32 }
33 
34           /*前三个字*/
35 .nav{
36     float: left;
37     margin-left: 70px;
38     height: 42px;
39 }
40 .nav li{
41     float: left;
42     margin-right: 26px;
43 }
44 .nav li a{
45     display: block;
46     padding: 0 9px;
47     height: 42px;
48     line-height: 42px;
49     /*border-bottom: 2px solid #00a4ff;*/
50     font-size: 18px;
51     color: #050505;
52 }
53           /*鼠标移动效果*/
54 .nav li a:hover{
55     border-bottom: 2px solid #00a4ff;
56 }
57         /*搜索*/
58 .search{
59     float: left;
60     margin-left: 59px;
61     width: 412px;
62     height: 40px;
63     border: 1px solid #00a4ff;
64 }
65 .search input{
66     float: left;
67     padding-left: 20px;
68     width: 360px;
69     height: 38px;
70     border: 0;
71 }
72         /*控制关键字*/
73 .search input::placeholder{
74     font-size: 14px;
75     color: #bfbfbf;
76 }
77 .search button{
78     float: left;
79     width: 50px;
80     height: 40px;
81     background-image: url("../img/btn.png");
82     border: 0;
83 }

 

标签:总结,margin,每日,float,height,li,border,left
From: https://www.cnblogs.com/fan-wang/p/17142487.html

相关文章

  • 2023.2.21周二每日总结
    今天依旧在钻研增删改查里面的增,白天上课到时候听了数据库原理老师的课,对数据库的操作有了更进一步的认知,逐渐明白如何往数据库中添加和修改信息,但是这和从网页录入的信......
  • 每日总结2023/2/21
    今天学习了AndroidStudio中每个部分的作用,各个部分代码的放置位置,了解到图片存放位置等在进入AndroidStudio后,等待启动完成  需将左上角Android换为Project  ......
  • 每日总结 2/21
     在2月21日,我完成了androidstudio的下载和安装, 在安装androidstudio的时候我的电脑总是出现一些问题,最开始下载的是2022版本的,但是最后下载了2021版本的就能用了,并......
  • 2.21每日总结2
    今天下午找了一些用java开发app的资料进行阅读,对java开发app有了初步的了解。并且用了两个多小时的时间进行了开发安卓App的软件androidstudio的安装与基本的使用。在安......
  • 2月21号总结
    今天复习了一下java的表达式,输入与输出整数的加减乘除四则运算:publicclassMain{publicstaticvoidmain(String[]args){inta=6+3*4/2-......
  • 每日总结--2023/2/21
    上午课程:英语提高数据库 下午课程pyhton学习内容:英语单词 软件开发流程:1.用户的需求分析:了解用户的具体功能要求2.设计数据库......
  • 2.21今日总结
     今天通过网络完成了androidstudio的安装,感觉过程有点繁琐,但androidstudio有两种编程语言分别为java和kotlin,我们用java方便也不用再去配置环境变量。用了接近四五十分......
  • 2.21今日总结
    今天是周二,因为白天课程排的比较满,所以并没有太多时间去学习Java方面的知识。只好利用晚上的时间重温了一下上次课堂上做的程序题。晚上时利用一些时间重温了一下之前学......
  • 2023年2月21日总结
    一直纠结于javaweb默认打开网页转换的问题,今天得以解决。JavaWeb开始的默认页面通常都是index.jsp这个页面,如果你想要更改的话,有两种方法。1.修改WEB-INF下的web.xml文......
  • 2.21号每日博客——安卓
      学习安卓开发,下载软件。  今天在菜鸟教程上学习了,Android的基础入门教程,为几个月后的外包杯做准备。   今天只是学习如何搭建开发环境。先是下载JDK,如何......