企业建设营销型网站的目的有网络编辑

当前位置： 首页 > news >正文

企业建设营销型网站的目的有,网络编辑,iis网站跳转,恩施网站设计写在前面 Hello大家好#xff0c; 我是【麟-小白】#xff0c;一位软件工程专业的学生#xff0c;喜好计算机知识。希望大家能够一起学习进步呀#xff01;本人是一名在读大学生#xff0c;专业水平有限#xff0c;如发现错误或不足之处#xff0c;请多多指正#xff0… 写在前面         Hello大家好 我是【麟-小白】一位软件工程专业的学生喜好计算机知识。希望大家能够一起学习进步呀本人是一名在读大学生专业水平有限如发现错误或不足之处请多多指正谢谢大家         如果小哥哥小姐姐们对我的文章感兴趣请不要吝啬你们的小手多多点赞加关注呀❤❤❤ 爱你们 目录 写在前面 1. 浮动 1.1 浮动的简介 1.2 元素浮动后的特点 1.3 浮动小练习 1.4 解决浮动产生的影响 1.5 浮动布局小练习 1.6 浮动相关属性 结语 【往期回顾】 【CSS系列】第一章 · CSS基础 【CSS系列】第二章 · CSS选择器 【CSS系列】第三章 · CSS三大特性和颜色的表示 【CSS系列】第四章 · CSS字体属性 【CSS系列】第五章 · CSS文本属性 【CSS系列】第六章 · CSS列表、表格、背景、鼠标属性 【CSS系列】第七章 · CSS盒子模型看这一篇就够了 【其他系列】 【HTML系列】 【Java基础系列】已更新完 1. 浮动 1.1 浮动的简介 在最初浮动是用来实现文字环绕图片效果的现在浮动是主流的页面布局方式之一。   !DOCTYPE html html langzh-CN headmeta charsetUTF-8title01_浮动_简介/titlestylediv {width: 600px;height: 400px;background-color: skyblue;}img {width: 200px;float: right;/* margin-right: 0.5em; /}.test::first-letter {font-size: 80px;float: left;}/style /head bodydivimg src../images/我的自拍.jpg altLorem ipsum dolor sit amet consectetur adipisicing elit. Sint, minus magnam accusamus eum laborum ducimus possimus beatae fugit illum molestias odit et asperiores adipisci sunt dolorem qui autem enim excepturi alias ab unde temporibus. Sapiente labore a magnam commodi itaque architecto quos doloribus voluptates perferendis rem, earum consectetur. Tempora inventore ducimus veritatis voluptatem deleniti rem laboriosam. Officiis, impedit explicabo! Impedit labore ea et vero rerum nihil in cum qui, itaque blanditiis eius nemo est? Tempora explicabo voluptates consectetur officia aperiam eos impedit veritatis necessitatibus quidem deleniti ea, in odit cum ex harum voluptas, quos eveniet quae voluptate aspernatur quod! Nostrum?/divhrdiv classtestLorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat voluptate impedit provident, debitis nostrum cumque iste ab ipsum tempora dicta neque aliquid error in dolorum qui iure. Quibusdam eligendi ea id! Accusamus praesentium vitae quidem iusto placeat provident alias tempore quasi quos, nesciunt rem, molestias quisquam? Quisquam laborum nulla ea veniam, nesciunt, dolores modi officia animi laboriosam minima exercitationem. Reiciendis enim sint at nisi quae obcaecati, vel iusto non libero officia possimus explicabo quis harum inventore sapiente accusantium id quidem cupiditate et expedita maiores perferendis! Reiciendis, distinctio doloribus! Quia harum iste doloremque pariatur obcaecati doloribus quasi iusto minima magnam iure!/div /body /html 1.2 元素浮动后的特点 脱离文档流。 不管浮动前是什么元素浮动后默认宽与高都是被内容撑开尽可能小而且可以设置宽高。 不会独占一行可以与其他元素共用一行。 不会 margin 合并也不会 margin 塌陷能够完美的设置四个方向的 margin 和 padding 。 不会像行内块一样被当做文本处理没有行内块的空白问题。 !DOCTYPE html html langzh-CN headmeta charsetUTF-8title02_元素浮动后的特点/titlestyle.outer {width: 800px;height: 400px;padding: 10px;background-color: gray;text-align: center;}.box {font-size: 20px;padding: 10px;}.box1 {background-color: skyblue;}.box2 {background-color: orange;float: left;/ width: 200px;height: 200px;margin-left: 20px;margin-right: 20px;margin-top: 20px;margin-bottom: 20px; /}.box3 {background-color: green;float: left;}/style /head bodydiv classouterdiv classbox box1盒子1/divdiv classbox box2盒子2/divdiv classbox box3盒子3/div/div /body /html 1.3 浮动小练习 练习 1 盒子1右浮动效果如下 !DOCTYPE html html langzh-CN headmeta charsetUTF-8titleDocument/titlestyle.outer {width: 500px;background-color: transparent;border: 1px solid black;}.box {margin: 10px;width: 100px;height: 100px;background-color: skyblue;border: 1px solid black;}.box1 {float: right;}/style /head bodydiv classouterdiv classbox box11/divdiv classbox box22/divdiv classbox box33/div/div /body /html 练习2盒子1左浮动效果如下 !DOCTYPE html html langzh-CN headmeta charsetUTF-8titleDocument/titlestyle.outer {width: 500px;background-color: transparent;border: 1px solid black;}.box {margin: 10px;width: 100px;height: 100px;background-color: skyblue;border: 1px solid black;}.box1 {float: left;}/style /head bodydiv classouterdiv classbox box11/divdiv classbox box22/divdiv classbox box33/div/div /body /html 练习3所有盒子都浮动效果如下 !DOCTYPE html html langzh-CN headmeta charsetUTF-8titleDocument/titlestyle.outer {width: 500px;background-color: transparent;border: 1px solid black;}.box {margin: 10px;width: 100px;height: 100px;background-color: skyblue;border: 1px solid black;float: left;}/style /head bodydiv classouterdiv classbox box11/divdiv classbox box22/divdiv classbox box33/div/div /body /html 练习4所有盒子浮动后盒子3落下来效果如下   !DOCTYPE html html langzh-CN headmeta charsetUTF-8titleDocument/titlestyle.outer {width: 500px;background-color: transparent;border: 1px solid black;}.box {margin: 10px;width: 200px;height: 200px;background-color: skyblue;border: 1px solid black;float: left;}/style /head bodydiv classouterdiv classbox box11/divdiv classbox box22/divdiv classbox box33/div/div /body /html 练习5所有盒子浮动后盒子3卡住了效果如下  !DOCTYPE html html langzh-CN headmeta charsetUTF-8titleDocument/titlestyle.outer {width: 500px;background-color: transparent;border: 1px solid black;}.box {margin: 10px;width: 200px;height: 200px;background-color: skyblue;border: 1px solid black;float: left;}.box1 {height: 230px;}/style /head bodydiv classouterdiv classbox box11/divdiv classbox box22/divdiv classbox box33/div/div /body /html 1.4 解决浮动产生的影响 元素浮动后会有哪些影响 对兄弟元素的影响 后面的兄弟元素会占据浮动元素之前的位置在浮动元素的下面对前面的兄弟无影响。 对父元素的影响 不能撑起父元素的高度导致父元素高度塌陷但父元素的宽度依然束缚浮动的元素。 !DOCTYPE html html langzh-CN headmeta charsetUTF-8title04_浮动后的影响/titlestyle.outer {width: 500px;background-color: gray;border: 1px solid black;}.box {width: 100px;height: 100px;background-color: skyblue;border: 1px solid black;margin: 10px;}.box1,.box2,.box3 {float: left;}/style /head bodydiv classouterdiv classbox box11/divdiv classbox box22/divdiv classbox box33/div/divdiv stylebackground-color:orangeLorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda expedita rem similique at laboriosam, magnam, ipsam inventore odit odio ipsum ex ad beatae quia, consequuntur quam dolore modi atque? Doloribus libero eos ut consequatur, assumenda amet quidem est quae doloremque maxime id cumque explicabo aliquam. Quas, explicabo illo neque rem dolores impedit aspernatur suscipit vel, dolore incidunt totam aliquam laborum! Fuga in rerum repudiandae suscipit, labore optio iste ratione nobis velit dolorem laborum doloribus perferendis porro enim, sequi, delectus nulla quam? Recusandae quidem nobis voluptatum quam quaerat itaque aliquam reiciendis molestias ratione nesciunt exercitationem quisquam laborum sit error magnam optio atque, debitis tempore. Quibusdam repellendus perspiciatis id consequuntur saepe suscipit enim temporibus, ipsa minima dolores laudantium inventore recusandae nam. Quo harum sunt reprehenderit nisi? Error quia quibusdam possimus tempore incidunt. Doloribus vitae quis nisi quod, aperiam molestias id quibusdam voluptate recusandae iure tempore hic doloremque similique corrupti expedita non odit a natus. Eius, harum iste, dolor omnis, saepe dolore illo aliquid impedit officia explicabo itaque dicta eos exercitationem at tempora perspiciatis voluptate ad eaque mollitia maiores obcaecati numquam. Veniam ex facere fugit ullam est velit officiis a autem perferendis ratione aliquid dolor voluptate magnam, illo alias sequi totam, ab nemo?/div /body /html 解决浮动产生的影响清除浮动 解决方案 方案一 给父元素指定高度。 方案二 给父元素也设置浮动带来其他影响。 方案三 给父元素设置 overflow:hidden 。 方案四 在所有浮动元素的最后面添加一个块级元素并给该块级元素设置 clear:both 。 方案五 给浮动元素的父元素设置伪元素通过伪元素清除浮动原理与方案四相同。 推荐使用 .parent::after {content: ;display: block;clear:both; } 布局中的一个原则设置浮动的时候兄弟元素要么全都浮动要么全都不浮动。 !DOCTYPE html html langzh-CN headmeta charsetUTF-8title05_解决浮动后的影响/titlestyle.outer {width: 500px;background-color: gray;border: 1px solid black;/ 第一种解决方案 // height: 122px; // 第二种解决方案 // float: left; // 第三种解决方案 // overflow: scroll; /}.box {width: 100px;height: 100px;background-color: skyblue;border: 1px solid black;margin: 10px;}.box1,.box2,.box3,.box4 {float: left;}.mofa {/ 第四种解决方案 /clear: both;}/ 第五种解决方案 /.outer::after {content: ;display: block;clear: both;}/style /head bodydiv classouterdiv classbox box11/divdiv classbox box22/divdiv classbox box33/divdiv classbox box44/div!– div classmofa/div –/divdiv stylebackground-color:orangeLorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda expedita rem similique at laboriosam, magnam, ipsam inventore odit odio ipsum ex ad beatae quia, consequuntur quam dolore modi atque? Doloribus libero eos ut consequatur, assumenda amet quidem est quae doloremque maxime id cumque explicabo aliquam. Quas, explicabo illo neque rem dolores impedit aspernatur suscipit vel, dolore incidunt totam aliquam laborum! Fuga in rerum repudiandae suscipit, labore optio iste ratione nobis velit dolorem laborum doloribus perferendis porro enim, sequi, delectus nulla quam? Recusandae quidem nobis voluptatum quam quaerat itaque aliquam reiciendis molestias ratione nesciunt exercitationem quisquam laborum sit error magnam optio atque, debitis tempore. Quibusdam repellendus perspiciatis id consequuntur saepe suscipit enim temporibus, ipsa minima dolores laudantium inventore recusandae nam. Quo harum sunt reprehenderit nisi? Error quia quibusdam possimus tempore incidunt. Doloribus vitae quis nisi quod, aperiam molestias id quibusdam voluptate recusandae iure tempore hic doloremque similique corrupti expedita non odit a natus. Eius, harum iste, dolor omnis, saepe dolore illo aliquid impedit officia explicabo itaque dicta eos exercitationem at tempora perspiciatis voluptate ad eaque mollitia maiores obcaecati numquam. Veniam ex facere fugit ullam est velit officiis a autem perferendis ratione aliquid dolor voluptate magnam, illo alias sequi totam, ab nemo?/div /body /html 1.5 浮动布局小练习 整体效果如下 具体标注如下  大家可以自己动手试试把这个页面写出来然后再看答案 !DOCTYPE html html langzh-CN headmeta charsetUTF-8title06_浮动布局小练习/titlestyle {margin: 0;padding: 0;}.leftfix {float: left;}.rightfix {float: right;}.clearfix::after {content: ;display: block;clear: both;}.container {width: 960px;margin: 0 auto;text-align: center;}.logo {width: 200px;}.banner1 {width: 540px;margin: 0 10px;}.banner2 {width: 200px;}.logo,.banner1,.banner2 {height: 80px;line-height: 80px;background-color: #ccc;}.menu {height: 30px;background-color: #ccc;margin-top: 10px;line-height: 30px;}.item1,.item2 {width: 368px;height: 198px;line-height: 198px;border: 1px solid black;margin-right: 10px;}.content {margin-top: 10px;}.item3,.item4,.item5,.item6 {width: 178px;height: 198px;line-height: 198px;border: 1px solid black;margin-right: 10px;}.bottom {margin-top: 10px;}.item7,.item8,.item9 {width: 198px;height: 128px;line-height: 128px;border: 1px solid black;}.item8 {margin: 10px 0;}.footer {height: 60px;background-color: #ccc;margin-top: 10px;line-height: 60px;}/style /head bodydiv classcontainer!– 头部 –div classpage-header clearfixdiv classlogo leftfixlogo/divdiv classbanner1 leftfixbanner1/divdiv classbanner2 leftfixbanner2/div/div!– 菜单 –div classmenu菜单/div!– 内容区 –div classcontent clearfix!– 左侧 –div classleft leftfix!– 上 –div classtop clearfixdiv classitem1 leftfix栏目一/divdiv classitem2 leftfix栏目二/div/div!– 下 –div classbottom clearfixdiv classitem3 leftfix栏目三/divdiv classitem4 leftfix栏目四/divdiv classitem5 leftfix栏目五/divdiv classitem6 leftfix栏目六/div/div/div!– 右侧 –div classright rightfixdiv classitem7栏目七/divdiv classitem8栏目八/divdiv classitem9栏目九/div/div/div!– 页脚 –div classfooter页脚/div/div /body /html 1.6 浮动相关属性 结语 本人会持续更新文章的哦希望大家一键三连你们的鼓励就是作者不断更新的动力