正文

第十七天学习笔记

葉蕓榕  葉蕓榕  2022-08-15  151

关键词：

今天主要是学习综合案例:

对于HTML及CSS知识点的运用,

因为时间关系并没有做的太多,以下是我的部分html代码:

 1 <!DOCTYPE html>
 2 <head>
 3     <meta charset="UTF-8">
 4     <title>传智官网</title>
 5     <link rel="stylesheet" type="text/css" href="CSS/Main_Css.css" />
 6 </head>
 7 <body>
 8     <!--主体-->
 9     <div class = "_main_body">
10         <!--主体顶部-->
11         <div class = "_main_body_top">
12             <!--顶部的顶部-->
13             <div class = "_m_b_t_topL">
14             专业的Java、.Net、PHP、C/C++、网页设计、平面设计、UI设计、iOS培训机构
15                 <span class = "_m_b_t_topR _float_right">
16                     <a href = "#">网站首页</a><a href = "#" class = "_blue">免费公开课</a><a href = "#" class = "_blue">校园生活</a><a href = "#" class = "_red">传智特刊</a><a href = "#">人才服务</a><a href = "#">招贤纳士</a><a href = "#" class = "_noline">联系我们</a>
17                 </span>
18             </div>
19             <!--顶部的顶部样式结束-->
20             <!--顶部logo-->
21             <div class = "_m_b_logo">
22                 <div class = "_m_b_logoL _float_left">
23                     <a href = "#"><img src = "images/logo.gif"></a>
24                 </div>
25                 <div class = "_m_b_logoR _float_right">
26                     <img src = "images/topword.gif">
27                 </div>
28                 <div class = "_m_b_logoC _float_left">
29                     <h2>PHP学院</h2>
30                     <ul class = "_over">
31                         <li><a href = "#">北京校区</a></li>
32                         <li><a href = "#">成都校区</a></li>
33                         <li><a href = "#">广州校区</a></li>
34                         <li><a href = "#">上海校区</a></li>
35                     </ul>
36                 </div>
37             </div>
38             <!--顶部logo结束-->
39             <!--顶部导航栏-->
40             <div class = "_top_navigation">
41                 <ul>
42                     <li><a href = "#">首页</a></li>
43                     <li><a href = "#">PHP培训课程</a></li>
44                     <li><a href = "#">PHP视频下载</a></li>
45                     <li><a href = "#">人才服务</a></li>
46                     <li><a href = "#">校园生活</a></li>
47                     <li><a href = "#">师资力量</a></li>
48                     <li><a href = "#">就业信息</a></li>
49                     <li><a href = "#">报名流程</a></li>
50                     <li><a href = "#">原创教材</a></li>
51                     <li><a href = "#">常见问题</a></li>
52                     <li><a href = "#">来校路线</a></li>
53                     <li><a href = "#">技术论坛</a></li>
54                 </ul>
55             </div>
56             <!--顶部导航栏结束-->
57         </div>
58         <!--主体顶部结束-->
59         <!--主体左边-->
60         <div class = "_main_body_left _float_left"></div>
61         <!--主体左边结束-->
62         <!--主体右边-->
63         <div class = "_main_body_right _float_right"></div>
64         <!--主体右边结束-->
65         <div class = "_clear"></div>
66     </div>
67     <!--主体结束-->
68     <!--页脚-->
69     <div class = "_footer">
70         
71     </div>
72     <!--页脚结束-->
73 </body>
74 </html>

接下来是我的部分的CSS代码:

  1 /*主页相关的CSS样式设置*/
  2 /*整体内外边距清空*/
  3 *{
  4     margin:0;
  5     padding:0;
  6 }
  7 
  8 
  9 /*body标签相关样式设置*/
 10 body{
 11     color:"#444";
 12     font-size:12px;
 13     /*X轴平铺背景图片*/
 14     background:#f1f1f1 url(../Images/bg-body.gif) repeat-x;
 15 }
 16 
 17 
 18 /*设置主体样式*/
 19 ._main_body{
 20     width:975px;
 21     margin:0 auto;
 22 }
 23 
 24 
 25 /*设置主体头部样式*/
 26 ._main_body_top{
 27     height: 196px;
 28 }
 29 
 30     /*设置头部样式的头部左边样式*/
 31     ._main_body_top ._m_b_t_topL{
 32         height:27px;
 33         line-height: 27px;
 34         color:blue;
 35     }
 36     /*设置头部样式的头部右边样式*/
 37     /*修改部分选项代码*/
 38     ._m_b_t_topR ._blue{
 39         color:#0000FF;
 40     }
 41     ._m_b_t_topR ._red{
 42         color:#B22222;
 43     }
 44     /*设置竖虚线线*/
 45     ._m_b_t_topR a{
 46         border-right:1px dotted #444444;
 47         padding:0 8px;
 48     }
 49     /*取消最后一个的虚线*/
 50     ._noline{
 51         border-right:none !important;
 52     }
 53     /*设置头部背景图片*/
 54     ._m_b_logo{
 55         height:122px;
 56         /*设置背景不平铺且水平居右下角*/
 57         background:url(../Images/bg-logo.jpg)no-repeat right bottom;
 58     }
 59     /*设置头部中部LOGOL*/
 60     ._m_b_logo ._m_b_logoL{
 61         padding-top:20px;
 62     }
 63     /*设置头部中部LOGOR*/
 64     ._m_b_logo ._m_b_logoR{
 65         padding:20px;
 66     }
 67     /*设置头部中部LOGOC*/
 68     ._m_b_logo ._m_b_logoC{
 69         padding-top:40px;
 70     }
 71     /*LOGOC中的标题样式*/
 72     ._m_b_logo ._m_b_logoC h2{
 73         color:#0473C4;
 74         font-size:24px;
 75         padding-bottom:5px;
 76     }
 77     /*LOGOC中的列表样式*/
 78     ._m_b_logo ._m_b_logoC ul li{
 79         float:left;        /*使其水平居左*/
 80         background-image:url(../Images/li01.png);    /*设置背景图片*/
 81         width: 68px;
 82         height: 20px;
 83         line-height: 20px;
 84         color: #fff;
 85         margin-right: 10px;
 86         padding-left: 10px;
 87     }
 88     /*顶部下的导航列表*/
 89 
 90     ._top_navigation ul li{
 91         float:left;        /*使其水平居左*/
 92     }
 93 
 94 
 95 /*设置主体左边样式*/
 96 ._main_body_left{
 97     width:660px;
 98     height:500px;
 99     background-color: #ccc;
100 }
101 
102 
103 /*设置主体右边样式*/
104 ._main_body_right{
105     width:290;
106     height:500px;
107     background:skyblue;
108 }
109 
110 
111 /*设置页脚样式*/
112 ._footer{
113     width:100%;
114     height:200px;
115     background-color: #000;
116 }
117 
118 
119 /*全局的样式*/
120 ._float_left{
121     float:left;        /*实线左浮动*/
122 }
123 ._float_right{
124     float:right;    /*实线右浮动*/
125 }
126 ._clear{
127     clear:both;        /*清除浮动*/
128 }
129 /*修改连接样式*/
130 a:link,a:visited{text-decoration: none;color: #444;}
131 a:hover{color:#f00;}
132 /*修改无序列表*/
133 ul{list-style: none;}    /*图片样式为空*/
134 ._over{
135     overflow: hidden;    /*溢出不可看*/    
136 }

嗯哼~基本就是这些,剩下的效果明天完成;

效果如图:

关于导航栏,我个人认为是要加宽度,具体情况还是要明天去实践

《python编程从入门到实践》——学习python的第十七天(代码片段)

Python学习的第十七天前言类文件和异常前言今天是学习python的第十七天，后面越来越复杂，希望大家不要掉队，努力理解，加油！类这里继续讲导入另一个板块中的类使用别名我们可以将模块或者类的名称变... 查看详情

《python编程从入门到实践》——学习python的第十七天(代码片段)

linux基础学习-第十十七天（网络基础）

一、OSI七层模型二、TCP/IP模型三次握手原理三、常见服务的默认端口四、IP地址、子网划分基础知识通信原理：一般数据的交互产生是在应用层(TCP/IP模型)，应用层以下可以看成是搬运工，不... 查看详情

第十七天学习进度--规律寻找算法之算法统一(代码片段)

前几天的多项式和幂次指数函数曲线函数拟合算法虽然各自都能够拟合很多种情况的曲线，而且之间有相通之处，但不可否认之处，二者在拟合曲线的时候还是都有各自单独拟合函数的情况，也就是说，如果没有把多项式函数拟... 查看详情

学习python的第十七天（二分法,有名函数,匿名函数,内置函数）(代码片段)

06.04学习总结一.二分法二分法个人理解是一种算法的方式在一个有序的序列,区中间值,把中间值与想要的值进行对比从而一次一次的减少搜索范围举例#给与一个列表1-100,num_list=[numfornuminrange(1,101)]#给予一个num让你在列表中寻找他m... 查看详情

第十七天

今天总结好了3种边框的修改方式<body><tablewidth="500"border="0"bgColor="green"align="center"cellspacing="1"><trbgColor="gold"><td>我的巴拉巴拉</td><td& 查看详情

暑假第十七天之每天一些题系列(代码片段)

暑假第十七天之每天一些题系列一、选择题下列程序段的输出结果为unsignedlongpulArray[]=6,7,8,9,10;unsignedlong*pulPtr;pulPtr=pulArray;*(pulPtr+2)+=2;printf("%d,%d\\n",*pulPtr,*(pulPtr+2));A.8,10B.6,8C 查看详情

java第十七天(代码片段)

17.01_集合框架(HashSet存储字符串并遍历)A:Set集合概述及特点通过API查看即可B:案例演示HashSet存储字符串并遍历HashSet<String>hs=newHashSet<>();booleanb1=hs.add("a");booleanb2=hs.add("a");//当存储不成功的时候,返回查看详情

9.20开课第十七天（函数）

函数四要素：1、返回类型 2、函数名 3、参数列表 4、函数体强类型语言函数写法访问修饰符返回类型函数名 (参数列表){　　函数体}publicintJia(inta,intb)//形式参... 查看详情

手机影音第十七天，实现歌词同步

代码已托管到码云，有兴趣的小伙伴可以下载看看 https://git.oschina.net/joy_yuan/MobilePlayer效果图： &nb 查看详情

方剂学第十七天祛痰

一燥湿化痰1.二陈汤功用：燥湿化痰，理气和中主治：湿痰证，咳嗽痰多，恶心呕吐，胸膈痞闷，肢体困重，头眩心悸，苔白腻，脉滑方剂：陈皮15g半夏15g（燥湿化痰，降逆和胃）茯苓9g（渗湿健脾）炙甘草4.5g生姜（可另加，降... 查看详情

学习笔记第十七节课

进入编辑模式。编辑模式就是进入一个可以编辑文本文档的模式。i是进入编辑模式，同样shift+i也可以，而且shift+i可以直接把光标定位到行首进去编辑模式。o也可以进去编辑模式，是在所在行的下一行进去编辑模式。也就是相... 查看详情

it十八掌作业_java基础第十七天_qq案例

感谢大家对IT十八掌大数据的支持，今天的作业如下：按照老师讲的，自己练习项目查看详情

二刷java基础第十七天——异常(代码片段)

异常：在程序过程中表现出不正常的现象java如何形容异常：Throwable类是Java语言中所有错误或异常的超类。只有当对象是此类（或其子类之一）的实例时，才能通过Java虚拟机或者Javathrow语句抛出。类似地，... 查看详情

刷题的狂欢-----java每日三练-----第十七天(代码片段)

努力刷题，每日三题。第一题这道题其实看起来不是很难，但是笔者遇到了一个小的问题，就是对于小数的处理，在这道题里面，你的结果如果是小数，如果是100.0，那么你就要把结果变成100，如果... 查看详情

30天自制操作系统——第十七天制作命令行窗口(代码片段)

今天的任务是制作命令行窗口，那么命令行窗口应该是什么样呢？在Windows系统里我们都使用过命令行窗口，它首先是黑底的，可以在里面输入各种字符、可以对输入的命令进行响应…命令行窗口的制作用到的都是... 查看详情

第七十七天

周五早上，不去，没点名哈哈下午，去了学习此外无事发生查看详情

寒假每日一题货币系统（个人练习）详细题解+推导证明（第十七天）(代码片段)

文章目录前言题目详细题解写法1O(nm)O(nm)O(nm)推导证明写法2O(nm)O(nm)O(nm)推导证明举一反三总结前言今天是大年初三，但是感觉年已经过去了，哈哈。今天的题我还忘记发了，题目给定V种货币（单位：元）&#x... 查看详情