学习日记7.21

最新推荐文章于 2024-06-03 10:15:00 发布
最新推荐文章于 2024-06-03 10:15:00 发布
阅读量109 收藏
点赞数
分类专栏： 学习日记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/desonly_forest/article/details/81158170
版权

一、学习内容

1.CSS样式原理；

2.CSS样式语法和创建类型；

3.CSS样式学习重点：选择器、布局、如何查阅API定义样式；

其中有标签选择器、id选择器、类选择器，同事将样式写在不同的地方有不同的优先级，跟在标签里写的最高，其次是在<head>的<style>标签里，最低的在外面写的.css文件。

二、代码的编辑

网站的主体框架html文件：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="index1.css">
    <meta charset="utf-8">
</head>
<body id="homefirst">
    <div id="wrapper">
        <div id="header_index">
            <h1><a href="" style="float: left;">w3chool在线教程</a></h1>
            <div id="searchui">
                <form method="get" id="searchform" action="http://www.google.com.hk/search">
                    <input type="hidden" name="sitesearch" value="w3school.com.cn">
                    <input type="text" name="as_p" class="box" title="在此输入搜索内容">
                    <input type="submit" value="GO" class="button" title="搜索">
                </form>
            </div>
        </div>
        <div id="navfirst">
            <ul id="menu">
                <li id="h">
                    <a href="" title="HTML系列教程">HTML系列教程</a>
                </li>
                <li id="b">
                    <a href="" title="HTML系列教程">HTML系列教程</a>
                </li>
                <li id="s">
                    <a href="" title="HTML系列教程">HTML系列教程</a>
                </li>
                <li id="d">
                    <a href="" title="HTML系列教程">HTML系列教程</a>
                </li>
                <li id="x">
                    <a href="" title="HTML系列教程">HTML系列教程</a>
                </li>
                <li id="ws">
                    <a href="" title="HTML系列教程">HTML系列教程</a>
                </li>
                <li id="w">
                    <a href="" title="HTML系列教程">HTML系列教程</a>
                </li>
            </ul>
        </div>
        <div id="navsecond">
            <h2>HTML教程</h2>
            <ul>
                <li><a href="">HTML</a></li>
                <li><a href="">HTML5</a></li>
                <li><a href="">XHTML</a></li>
                <li><a href="">CSS</a></li>
                <li><a href="">CSS3</a></li>
                <li><a href="">TCP/IP</a></li>

            </ul>
            <h2>浏览脚本</h2>
            <ul>
                <li><a>JavaScript</a></li>
                <li><a>HTML DOM</a></li>
                <li><a>jQuery</a></li>
                <li><a>jQuery Mobile</a></li>
                <li><a>AJAX</a></li>
                <li><a>Json</a></li>
                <li><a>DHTML</a></li>
                <li><a>E4X</a></li>
                <li><a>WMLScript</a></li>

            </ul>
            <h2>服务器脚本</h2>
            <ul>
                <li><a>PHP</a></li>
                <li><a>SQL</a></li>
                <li><a>ASP</a></li>
                <li><a>ADO</a></li>
                <li><a>VBScript</a></li>
            </ul>
            <h2>XML教程</h2>
            <ul>
                <li><a>XML</a></li>
                <li><a>DTD</a></li>
                <li><a>XML DOM</a></li>
                <li><a>XSL</a></li>
                <li><a>XSLT</a></li>
                <li><a>XSL-FO</a></li>
                <li><a>Xpath</a></li>
                <li><a>XQuery</a></li>
                <li><a>XLink</a></li>
                <li><a>XPointer</a></li>
                <li><a>Schema</a></li>
                <li><a>XForms</a></li>
                <li><a>WAP</a></li>
                <li><a>SVG</a></li>
            </ul>
            <h2>Web Services</h2>
            <ul>
                <li><a>Web Services</a></li>
                <li><a>WSDL</a></li>
                <li><a>SOAP</a></li>
                <li><a>RSS</a></li>
                <li><a>RDF</a></li>

            </ul>
            <h2>.NET</h2>
            <ul>
                <li><a>ASP.NET</a></li>
                <li><a>Web Pages</a></li>
                <li><a>Razor</a></li>
                <li><a>MVC</a></li>
                <li><a>Web Forms</a></li>
            </ul>
            <h2>建站手册</h2>
            <ul>
                <li><a>网站构建</a></li>
                <li><a>万维网联盟</a></li>
                <li><a>浏览器信息</a></li>
                <li><a>网站品质</a></li>
                <li><a>语义网</a></li>
                <li><a>职业规划</a></li>
                <li><a>网站主机</a></li>
                <li><a>网络媒体</a></li>
            </ul>
        </div>
        <div id="footer">
            <p id="p1">W3School简体中文版提供的内容仅用于培训和测试，不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。</p>
        </div>
    </div>

</body>
</html>

网站的主体框架css文件：

* {
    padding: 0px;
    margin: 0px;
    border: 0px;
}
#homefirst {
    text-align: center;
    margin: 0px;
    padding: 0px;
    border: 0px;
    background-color: #fdfcf8;
}
#wrapper {
    margin: 0 auto;
    padding: 0px;
    border: 0px;
    width: 1239px;
    text-align: left;
    background: transparent url(wrapper.png) top left repeat-y;
}
#header_index {
    margin: 0 0 0 12px;
    padding: 0px;
    width: 1210px;
    height: 100px;
    background: #fdfcf8;
}
#header_index h1 a {
    text-indent: -9999px;
    margin: 0px;
    padding: 0px;
    border: 0px;

}
#header_index h1 a:link,#header_index h1 a:visited {
    display: block;
    width: 372px;
    height: 90px;
    background: transparent url(bg.png) 0 -150px no-repeat;
}
#header_index h1 a:hover {
    background: transparent url(bg.png) 0 -250px no-repeat;
}
#searchui {
    margin: 0px;
    padding: 0px;
    width: 306px;
    height: 100px;
    float: right;
}
.box {
    margin: 35px 0 0 0;
    padding: 0px;
    width: 256px;
    height: 28px;
    background-color: #fdfdfd;
    font: 12px Verdana,Arial,Helvetica,sana-serif;
    border: 1px solid #ddd;
}
.button {
    padding: 0;
    margin:0;
    background-color: #AE4141;
    font:12px Verdana,Arial,Helvetica,sana-serif;
    color: #ffffff;
    width: 30px;
    height: 30px;
    border: 1px solid;
}  /*header结束*/

#navfirst {
    height: 48px;
    width: 1210px;
    margin: 0 0 0 12px;
    padding: 0;
    border: 0;
    background-color: #E8E7E3;
}
#menu {
    height: 48px;
    width: 1210px;
    background: transparent url(bg.png) top left no-repeat;
    margin: 0;
    padding: 0;
    position: relative;
}

#menu li {
    margin: 0px;
    padding: 0px;
    list-style: none;
    position: absolute;
    top: 0px;
}
#menu a,#menu li {
    display: block;
    height: 48px;
    border-bottom: 0px;
}
#menu li a {
    text-indent: -9999px;
    text-decoration: none;
}
#h {left: 0;width: 144px;}
#b{left: 155px;width: 157px;}
#s{left: 312px;width: 167px;}
#d{left: 479px;width: 158px;}
#x{left: 637px;width: 101px;}
#ws{left: 738px;width: 185px;}
#w{left: 923px;width: 177px;}
#h a:hover  {background: transparent url(bg.png) 0 -48px no-repeat;}
#b a:hover  {background: transparent url(bg.png) -155px -48px no-repeat;}
#s a:hover      {background: transparent url(bg.png) -312px -48px no-repeat;}
#d a:hover  {background: transparent url(bg.png) -479px -48px no-repeat;}
#x a:hover      {background: transparent url(bg.png) -637px -48px no-repeat;}
#ws a:hover {background: transparent url(bg.png) -738px -48px no-repeat;}
#w a:hover  {background: transparent url(bg.png) -923px -48px no-repeat;}
/*上方导航栏结束*/
#navsecond {
    float: left;
    margin: 0 0 0 11.5px;
    padding: 0;
    border: 0;
    width: 180px;
    background: transparent;
}

#navsecond h2 {
    font-size: 14px;
    padding: 10px 0 5px 10px;
    color: #000;
    display: block;
    border-bottom: 0px solid #ddd;
    font-family: "微软雅黑";
}
#navsecond ul {
    padding: 0;
    border: 0px;
    margin: 0px;
}
#navsecond li {
    list-style: none;
    margin: 0px;
    padding: 0px;
    font-family: "微软雅黑";

}
#navsecond li a {
    display: block;
    padding: 5px 0 5px 15px;
    font-size: 12px;
    border-bottom: 0px solid #ddd;
    text-decoration: none;

}
#navsecond li a:link,#navsecond li a:visited {
    text-decoration: none;
    color: #000;
    background: transparent;
}
#navsecond li a:hover {
    text-decoration: none;
    color: #fff;
    background: #aaa;
}

#footer {
    clear: both;
    margin: 0px;
    padding-top: 16px;
    margin-left: 12px;
    width: 1210px;
    line-height: 24px;
    border-top: 0px solid #fff;
    background: #fdfcf8 url(footer.png) top left repeat-x;
    font: PingFangSC-Regular,'微软雅黑',Verdana,Arial,'宋体';
}
#p1 {
    font-size: 12px;
    color: #777;
    text-align: center;
    background: transparent url(alert.png) no-repeat;
    background-position: 235px 2px;
}

运行结果：
这里写图片描述

三、学习心得

今天学的东西相对而言比较复杂，内容知识也越来越多，只有每天不打折扣的将学习任务完成才能为后面的知识打好基础。

desonly_forest
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
7.21mask代码及相关学习记录
07-21
根据提供的信息，我们可以总结出以下相关的IT知识点： ### 一、结构定义与数据类型 1. **`pixel` 结构体**： - `width`: 图像宽度（像素）。 - `height`: 图像高度（像素）。 此结构体用于存储图像的基本尺寸...
软件工程7.21
08-03
【软件工程7.21】知识点详解 软件工程是一个涵盖了从需求分析到系统实现的全过程。在这个过程中，从对象导向分析（OOA）到对象导向设计（OOD）是一个逐步细化和扩展模型的过程。分析模型主要关注用户可见的问题，...
coach的学习日记 7.21
qq_37831759的博客
07-31 208
coach的学习日记 Property装饰器 一般来说可以通过._的方式来说明某个对象是受保护的。使用Property包装器可以使得对象的访问安全和方便。 如下代码： class Person(object): def __init__(self, name, age): self._name = name self._age = age # 访...
学习日记（7.21）
zxyybxx0925的博客
07-21 183
今天是我学习C语言的第二天，对我来说它既是一个挑战也是一个机会。接下来我将会做一个今日份学习的总结。
渡课学习日记-7.21
7.16
07-22 96
今天老师给我们讲了新的内容:css。 主要内容： 用css给页面布局 听了还不是太懂，想从作业中寻找问题，然后解决问题
7.21 zr实习日记
qq_43261057的博客
07-22 170
实习日记学习内容作业总结 学习内容 今天老师主要是带领我们用ssm框架去做了昨天的登陆界面。同时也说了一下我们昨天遇到的一些问题。 首先，创建一个maven项目，因为是第一次创建，所以会很慢。 导入配置文件：applicationContext.xml、spring-mvc.xml、properties.xml、pom.xml（替换成老师发的文件） 在src/main下边新建一个Directory,名字为resources，鼠标右键—>mark directory as —>Res
初识c语言7.20~7.21学习日记
Ahardworkingboy的博客
07-26 37
c语言是人和机器沟通的一门语言，当然c只是众多语言之一。
网络工程师学习日记-06
weixin_47602540的博客
06-03 770
数据通信 IP协议基础 MPLS
中软国际实训日记第二天-7.21
Victorsb1的博客
07-22 462
目录 1.配置maven 2.创建ssm项目工程 3.学习ssm框架 正文 1.配置maven 1.1在系统环境变量下path新建一个目录 1.2将apache-maven-3.6.0下面的bin文件夹目录复制过来 1.3成功后在命令提示符输入mvn -v检查是否成功 2.创建ssm项目工程 2.1选择在file->new project->maven 2.2点击+号 2.3输入name,value 2.4最后点击finish创建成功 3.学习ssm框架 3.1基本概念 3.1.1 S
机器学习的1000+篇文章总结
02-28 9168
机器学习的1000+篇文章总结 本文收集和总结了有关机器学习的1000+篇文章，由于篇幅有限只能总结近期的内容，想了解更多内容可以访问：http://www.ai2news.com/, 其分享了有关AI的论文、文章、图书。 吴恩达机器学习-9-降维PCA http://www.ai2news.com/blog/12185/ 机器学习也有弱点？哪些是机器学习的未解之谜？ http://www.ai2news.com/blog/39473/ 一站式机器学习平台建设实践 http://www
【考研英语】词汇笔记与阅读日记
HYY的博客
07-12 6147
注释：: 专业化 : 职业化 ：业余爱好者 : 明确的，清楚的 ：（僻）作比较例句: No clear-cut distinction can be drawn between xxx and yyy.: （超）含义，隐含意义 ： 实验室 : 在…方面 ： 首要，至高无上句中短语： on the primacy of research （“科研为本”）：（僻）论文： 加强，使更强烈 : （僻）采用，推行 ： 审阅，鉴定（专业文章）半句： a result that has been reinforced b
三星CM7.21update
11-30
【三星CM7.21update】是一个针对三星设备的系统更新，主要基于CyanogenMod 7.2.1版本的第三方Android定制ROM。CyanogenMod是一个广受欢迎的开源项目，它为Android设备提供了更自由、可自定义的体验，通常包含额外的...
犀牛rhino V7.21安装包-链接地址.txt
10-13
犀牛rhino V7.21安装包_链接地址 犀牛rhino V7.21安装包_链接地址
深山留言板 7.21
04-30
深山留言板 7.21 更新日志：2016-08-11 修改了二维码错位显示问题修改了PC版与wap版搜索留言与添加留言为相对路径修改台框架效果增加了前台显示选择CSS样式名称修改后台选择CSS样式提示错误增加了24种css模板效果...
基于Springboot和Vue的图书借还管理系统源码 图书借还管理系统代码（高分毕设）
07-28
图书借还管理系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
C语言内存管理：静态与动态分配的较量
07-28
C语言是一种通用的编程语言，由丹尼斯&middot;里奇（Dennis Ritchie）在20世纪70年代早期于美国电话电报公司（AT&T）的贝尔实验室开发。C语言以其高效性、灵活性和可移植性而闻名，它是一种过程式编程语言，提供了对底层硬件的直接访问能力。 C语言的特点包括： 1. **简洁高效**：C语言的语法简洁，执行效率高，适合编写系统软件。 2. **接近硬件**：C语言提供了对内存地址和位操作的直接控制，使其非常适合硬件级编程。 3. **可移植性**：C语言编写的程序可以在不同的操作系统和硬件平台上编译和运行，具有很好的可移植性。 4. **丰富的库支持**：C语言拥有大量的标准库，如标准输入输出库（stdio.h）、数学库（math.h）等。 5. **结构化编程**：C语言支持结构化编程，允许使用循环、条件判断和函数等控制结构。 6. **指针**：C语言的指针功能强大，可以操作内存地址，实现复杂的数据结构和算法。 7. **编译型语言**：C语言是一种编译型语言，源代码需要通过编译器转换成机器码才能运行。 C语言广泛应用于操作系统（如Unix和Linux）、嵌入式系统、高性能
通讯协议规范-命令包格式
07-28
提供一份通讯协议规范，包含命令包、格式等，在上下位机调试的时候可参考该文档，制定对应的通讯协议。
四足宠物机器狗动态步行规划与仿真.pdf
最新发布
07-28
四足宠物机器狗动态步行规划与仿真
nvenc 7.21 h265
10-30
7.21是指NVENC版本号，而H265则表示编码格式为H.265。 H.265是一种高效的视频编码标准，也被称为HEVC (High Efficiency Video Coding)。相比于H.264，H.265可以提供更好的视频质量，同时减少了大约50%的比特率。它...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值