精华内容
下载资源
问答
  • CSS练习题

    2021-03-08 13:40:25
    CSS练习题 人们都说抖音记录美好生活,我说博客记录美好生活!随手练练CSS 1、margin——控制网页元素的位置,页面效果如下: 代码如下: <!doctype html> <html> <head> <meta charset=...

    CSS练习题

    1、margin——控制网页元素的位置,页面效果如下:
    在这里插入图片描述
    代码如下:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>控制网页元素的位置</title>
    <link href="style/2-7.css" rel="stylesheet" type="text/css">
    
    </head>
    
    <body>
    <div id="box">
      <div id="pic"><img  class="pic1" src="images/2702.jpg" alt="" /></div>
    </div>
    </body>
    </html>
    
    
    @charset "utf-8";
    /* CSS Document */
    *{
    	margin:0px;
    	padding:0px;
    }
    body{
    	background-color:#917e67;
    }
    #box{
    	width:820px;
    	height:687px;
    	background-image:url(../images/2701.jpg);
    	background-repeat:no-repeat;
    	background-position: left 20px;
    	margin:0px auto;
    	padding-top: 20px;
    }
    .box{
    		background-image: url(images/2701.jpg)
    	}
    	.pic1{
    		
    margin:180px 80px 30px 80px;
    	}
    

    2、border——为网页元素添加边框,页面效果如下:
    在这里插入图片描述
    代码如下:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>为网页元素添加边框</title>
    <link href="style/2-8.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
    <div id="box">
      <div id="logo"><img src="images/2803.png" width="269" height="37" alt="" /></div>
      <div id="main">
      	<img class="pic1" src="images/2804.jpg" alt="" width="210" height="190" />
      	<img class="pic2" src="images/2805.jpg" alt="" width="210" height="190" />
      	<img class="pic3"  src="images/2806.jpg" alt="" width="210" height="190" />
      	<img class="pic4"  src="images/2807.jpg" alt="" width="210" height="190" />
      	<img class="pic1"  src="images/2808.jpg" alt="" width="210" height="190" />
      	<img class="pic2"  src="images/2809.jpg" alt="" width="210" height="190" />
      	<img class="pic3"  src="images/2810.jpg" alt="" width="210" height="190" />
      	<img class="pic4"  src="images/2811.jpg" alt="" width="210" height="190" />
      </div>
    </div>
    <p>&nbsp;</p>
    </body>
    </html>
    
    
    @charset "utf-8";
    /* CSS Document */
    * {
    	margin: 0px;
    	padding: 0px;
    }
    body {
    	font-family: 微软雅黑;
    	font-size: 14px;
    	color: #FFF;
    	line-height: 30px;
    	background-image: url(../images/21001.jpg);
    	background-repeat: no-repeat;
    	background-position: center -100px;
    }
    #box {
    	width: 575px;
    	height: 359px;
    	margin: 90px auto 0px auto;
    	background-image: url(../images/21002.png);
    	background-repeat: no-repeat;
    	padding: 28px 92px 128px 92px;
    }
    
    #pic01 {
    	position:relative;
    	top:-235px;
    	left:250px;
    }
    
    

    3、padding——控制Div中内容的位置,页面效果如下:
    在这里插入图片描述
    代码如下:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>控制Div中内容的位置</title>
    <link href="style/2-9.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
    <div id="box">
    	<img src="images/2902.png" alt="" />
    </div>
    </body>
    </html>
    
    @charset "utf-8";
    /* CSS Document */
    *{
    	margin:0px;
    	padding:0px;
    }
    body{
    	background-image:url(../images/2901.gif);
    	background-repeat:repeat-x;
    }
    #box{
    	width: 917px;
    	height: 552px;
    	margin: 0px auto;
    }
    #box {
    	padding-top: 60px;
    }
    
    

    4、相对定位、绝对定位、浮动定位、页面效果如下:
    在这里插入图片描述

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>设置网页元素叠加显示</title>
    <link href="style/2-10.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
    <div id="box"><img src="images/21003.jpg" width="575" height="359"  alt=""/>
      <div id="pic01">
      	<img src="images/21004.png" alt="" />
      </div>
    </div>
    </body>
    </html>
    
    
    @charset "utf-8";
    /* CSS Document */
    * {
    	margin: 0px;
    	padding: 0px;
    }
    body {
    	font-family: 微软雅黑;
    	font-size: 14px;
    	color: #FFF;
    	line-height: 30px;
    	background-image: url(../images/21001.jpg);
    	background-repeat: no-repeat;
    	background-position: center -100px;
    }
    #box {
    	width: 575px;
    	height: 359px;
    	margin: 90px auto 0px auto;
    	background-image: url(../images/21002.png);
    	background-repeat: no-repeat;
    	padding: 28px 92px 128px 92px;
    }
    
    #pic01 {
    	position:relative;
    	top:-235px;
    	left:265px;
    }
    
    

    在这里插入图片描述

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>设置网页元素固定在右侧显示</title>
    <link href="style/2-11.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
    <div id="box">我们的作品<br>
      <img src="images/21102.png" width="600" height="400"  alt=""/>
    </div>
    
    <div id="pic">
    	<img src="images/21103.png" alt="" />
    </div>
    </body>
    </html>
    
    
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>设置网页元素固定在右侧显示</title>
    <link href="style/2-11.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
    <div id="box">我们的作品<br>
      <img src="images/21102.png" width="600" height="400"  alt=""/>
    </div>
    
    <div id="pic">
    	<img src="images/21103.png" alt="" />
    </div>
    </body>
    </html>
    
    

    在这里插入图片描述

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>制作作品列表</title>
    <link href="style/2-13.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
    <div id="box">
      <div id="menu"><img src="images/21303.png" width="124" height="50" alt="" /><img src="images/21304.png" width="124" height="50" alt="" /><img src="images/21305.png" width="124" height="50" alt="" /><img src="images/21306.png" width="124" height="50" alt="" /><img src="images/21307.png" width="124" height="50" alt="" /></div>
      <div id="bottom">
        <div id="pic"><img src="images/21309.jpg" width="180" height="96" alt="" /></div>
        <div id="pic01"><img src="images/21310.jpg" width="180" height="96" alt="" /></div>
        <div id="pic02"><img src="images/21311.jpg" width="180" height="96" alt="" /></div>
        <div id="pic"><img src="images/21312.jpg" width="180" height="96" alt="" /></div>
        <div id="pic01"><img src="images/21313.jpg" width="180" height="96" alt="" /></div>
        <div id="pic02"><img src="images/21314.jpg" width="180" height="96" alt="" /></div>
      </div>
    </div>
    </body>
    </html>
    
    
    @charset "utf-8";
    /* CSS Document */
    *{
    	margin:0px;
    	padding:0px;
    }
    body{
    	background-color:#dde1e4;
    	background-image:url(../images/21301.jpg);
    	background-repeat:no-repeat;
    	background-position:center top;
    }
    #box{
    	width:1100px;
    	height:auto;
    	overflow:hidden;
    	margin:0px auto;
    }
    #menu{
    	width:100%;
    	height:270px;
    	background-image:url(../images/21302.png);
    	background-repeat:no-repeat;
    	background-position:30px 30px;
    	text-align:right;
    }
    #bottom{
    	width:616px;
    	height:340px;
    	background-image:url(../images/21308.jpg);
    	background-repeat:no-repeat;
    	padding:10px;
    	margin-left:20px;
    	margin-bottom:20px;
    }
    #pic{
    	width: 180px;
    	height: 96px;
    	margin: 4px;
    	background-color: #CCC;
    	padding: 8px;
    	float:left;
    }
    #pic01{
    	width: 180px;
    	height: 96px;
    	margin: 4px;
    	background-color: #CCC;
    	padding: 8px;
    	float:left;
    }
    #pic02{
    	width: 180px;
    	height: 96px;
    	margin: 4px;
    	background-color: #CCC;
    	padding: 8px;
    	float:left;
    }
    
    
    展开全文
  • CSS练习题.pdf

    2021-09-14 11:03:26
    CSS练习题.pdf
  • html,css练习题

    2020-11-04 10:33:17
    html,css练习题 一. 选择题 在下列的 HTML 中,哪个可以产生超链接. B A. <a url="http://www.dapengjiaoyu.com">啦啦啦</a> B. <a href="http://www.dapengjiaoyu.com">啦啦啦</a> C. <...

    html,css练习题

    一. 选择题

    1. 在下列的 HTML 中,哪个可以产生超链接. B
      A. <a url="http://www.dapengjiaoyu.com">啦啦啦</a>
      B. <a href="http://www.dapengjiaoyu.com">啦啦啦</a>
      C. <a>http://www.hahaha.com</a>
      D. <a name="http://www.dapengjiaoyu.com">啦啦啦</a>

    2. 如何在新窗口打开链接( ). B
      A. <a href="url" new>
      B. <a href="url" target="_blank">
      C. <a href="url" target="new">

    3. 下列关于标签说法错误的是( ). D
      A. <a >标签是超链接标签,可以使用href属性使其指向另一个资源
      B. 当点击<a>标签时触发的提交方式为get提交方式
      C. <a>可以嵌套标签,使图片变为一个可以点击的超链接
      D. <a>标签可以指向一张图片,从而在该位置显示一张图片

    4. 请选择可以使单元格中的内容进行左对齐的正确 HTML 标签( ). A
      A. <td align="left">
      B. <td valign="left">
      C. <td leftalign>
      D. <tdleft>

    5. 以下选项中哪个是正确的( ). AC
      A. rowspan可以合并行
      B. colspan 可以合并行
      C. table表格标签中border标签是可以设置表格边框线粗细的
      D. caption属性是设置表格的

    6. 下列哪一项表示的不是按钮( ). C
      A.type= “submit”
      B.type= “reset”
      C.type= “img”
      D.type= "button "

    7. 在下列的 HTML 中,哪个可以产生复选框( ). C
      A. <input type="check">
      B. <checkbox>
      C. <input type="checkbox">
      D. <check>

    8. 在下列的 HTML 中,哪个可以产生文本框( ). C
      A. <input type="textfield">
      B. <textinput type="text">
      C. <input type="text">
      D. <textfield>

    9. 在下列的 HTML 中,哪个可以产生下拉列表( ). D
      A.<list>
      B. <input type="list">
      C.<input type="dropdown">
      D.<select>

    10. 在下列的 HTML 中,哪个可以产生文本区(textarea)( ). A
      A. <textarea>
      B. <input type="textarea">
      C. <input type="textbox">

    11. 分析下面的HTML代码片段,选项中的说法正确的是( ) C
      在这里插入图片描述

      A. 该表格共有2行3列
      B. 该表格的宽度为10毫米
      C. 该表格中的文字均居中显示
      D. “姓名”单元个跨2行

    12. 假如要将图片文件logo.jpg插入页面,并为该图片设置替代文字为“ASR Outfitters Logo”,下面语句正确的是( ). B
      A、<img src = ”logo.jpg”> ASR Outfitters Logo</img>
      B、< img src = “logo.jpg” alt=” ASR Outfitters Logo” />
      C、< img src = “logo.jpg”> alt=” ASR Outfitters Logo”/>
      D、< img url= “logo.jpg” alt=” ASR Outfitters Logo” />

    13. <Frameset cols=#>是用来指定( ). B
      A. 混合分割
      B. 纵向分割
      C. 横向分割
      D. 任意分割

    14. 下列语句能够正确在一个HTML页面中导入在同一目录下的“StyleSheet1.css”样式表 的是( ). B
      A. <style>import StyleSheet1.css;</style>
      B. <link rel=”stylesheet” type=”text/css” href=”StyleSheet1.css”>
      C. <link rel=”stylesheet1.css” type=”text/css”>
      D. <style rel=”stylesheet” type=”text/css” src=”StyleSheet1.css”></style>

    15. ( )属性用于定义表单中控件的类型. A
      A. TYPE
      B. FORM
      C. INPUT
      D. CAPTION

    16. 某一站点主页面index.html的代码如下所示,则选项中关于这段代码的说法正确的是 ( ) A
      在这里插入图片描述

      A. 该页面共分为三部分
      B. top.html显示在页面上部分,其宽度和窗口宽度一致
      C. left.html显示在页面左下部分,其高度为100像素
      D. right.html显示在页面右下部分,其高度小于窗口高度

    17. CSS 指的是( ). B
      A. Computer Style Sheets
      B. Cascading Style Sheets
      C. Creative Style Sheets
      D. Colorful Style Sheets

    18. 在以下的 HTML 中,哪个是正确引用外部样式表的方法( ). B
      A. <style src="mystyle.css">
      B. <link rel="stylesheet" type="text/css" href="mystyle.css">
      C. <stylesheet>mystyle.css</stylesheet>

    19. 哪个 HTML 标签用于定义内部样式表( ). A
      A. <style>
      B. <script>
      C. <css>

    20. 下列哪个选项的 CSS 语法是正确的( ). C
      A. body:color=black
      B. {body:color=black(body}
      C. body {color: black}
      D. {body;color:black}

    21. 哪个 HTML 属性可用来定义内联样式( ). D
      A. font
      B. class
      C. styles
      D. Style

    22. 如何在 CSS 文件中插入注释( ). C
      A. // this is a comment
      B. // this is a comment //
      C. /* this is a comment */
      D. ’ this is a comment

    23. css中哪个属性可用于改变背景颜色( ).B
      A. bgcolor:
      B. background-color:
      C. color:

    24. 如何为所有的 <h1> 元素添加背景颜色( ). B
      A. h1.all {background-color:#FFFFFF}
      B. h1 {background-color:#FFFFFF}
      C. all.h1 {background-color:#FFFFFF}

    25. 如何改变某个元素的文本颜色( ). C
      A. text-color:
      B. fgcolor:
      C. color:
      D. text-color=

    26. 如何显示这样一个边框:上边框 10 像素、下边框 5 像素、左边框 20 像素、右边框 1 像素( ). D
      A. border-width:10px 5px 20px 1px
      B. border-width:10px 20px 5px 1px
      C. border-width:5px 20px 10px 1px
      D. border-width:10px 1px 5px 20px

    27. background属性是否可以实现多层背景填充( ). A
      A. 可以
      B. 不可以

    二. 简答题

    1. 分别说明 HSLA ----- RGB 分别代表什么
      H — 色调
      S — 饱和度
      L — 亮度
      A — 透明度
      R – 红
      G – 绿色
      B-- 蓝色
    2. 说明每一个值得作用
      1.一个值padding:5px; 内边距 内容局边框之间5像素4个方向
      2.两个值 padding:5px 15px; 上下5 左右15
      3.三个值padding:5px 15px 6px; 上5 左右15 下6
      4.四个值padding:5px 15px 6px 4px; 上5 右15 下6 左4

    在这里插入图片描述

    margin – 外边距
    border – 边框线
    padding – 内边距
    300X300 – 内容

    展开全文
  • html、css练习题

    千次阅读 2018-09-12 15:52:59
    1. 网络慢的时候,会只加载html内容,不加载css样式,页面只显示html的文字内容。    显示的效果:  解决办法(1): a { display: inline-block; width: 190px; height: 140px; border: 1px solid ...

    1. 网络慢的时候,会只加载html内容,不加载css样式,页面只显示html的文字内容。 

     

    显示的效果:

     解决办法(1):

    a {
        display: inline-block;
        width: 190px;
        height: 140px;
        border: 1px solid black;
        background-image: url(https://img.alicdn.com/tfs/TB1reRSv8jTBKNjSZFwXXcG4XXa-190-140.gif);
        white-space: nowrap;
        text-indent: 200px;
        overflow: hidden;
    }

    解决办法(2):

    content区:宽190px;高:0px;padding-top:140px;这样图片就在padding-top区域;因为图片默认是从border-box开始的

    a {
        display: inline-block;
        width: 190px;
        height: 0px;
        border: 1px solid black;
        background-image: url(https://img.alicdn.com/tfs/TB1reRSv8jTBKNjSZFwXXcG4XXa-190-140.gif);
        padding-top: 140px;
        overflow: hidden;
    }

     

    展开全文
  • optimization: { splitChunks: { cacheGroups: { styles: { name: 'styles', test: /\.css$/, chunks: 'all', enforce: true // 强制忽略minChunks等设置 } } } } 复制代码 多入口js中,如果想让各个js中引入的css...

    之前学习过webpack3的知识,但是webpack4升级后还是有很多变动的,所以这次重新整理一下webpack4的知识点,方便以后复习。

    这次学习webpack4不仅仅要会配置,记住核心API,最好还要理解一下webpack更深层次的知识,比如打包原理等等,所以可能会省略一些比较基础的内容,但是希望我可以通过此次学习掌握webpack,更好地应对以后的工作。

    1. MiniCssExtractPlugin

    可以利用这个插件对css进行代码分割。

    注:补充一个知识点,在output中可以配置chunkFilename,这个是对间接引用的js文件进行命名,稍后会用到。

    首先安装插件cnpm install --save-dev mini-css-extract-plugin。

    安装完成后,在webpack.config.js中引入插件,并在plugins中初始化。

    695ae12a3f0f881aab19351ead5ee89d.png

    6838bbce4817fd095491d0f6d58093ff.png

    然后配置module,把所有的style-loader替换为MiniCssExtractPlugin.loader,其他配置项不变。

    66a2eb66d2c6c721bcf259ae29498580.png

    进行打包,dist目录中就有了CSS文件。

    7b7ef0641fb14ca87c3e171c4a926a0f.png

    如果此时打包的文件没有css,有可能是因为tree Shaking中,package.json没有设置sideEffects。

    87bc73d00541c914b6d9ae6f356a7070.png

    2. MiniCssExtractPlugin参数

    85add785000fe3f1e4e2f67752a0c590.png

    与js相同,页面直接引用的css命名规则是filename,而间接引用的css命名规则是chunkFilename。

    3.MiniCssExtractPlugin其他用法

    如果我们引入两个css文件,MiniCssExtractPlugin会把他们打包到一个文件中。

    32256cd94e345f4788335f8459057b8e.png

    如果想压缩css代码,需要安装一个插件 optimize-css-assets-webpack-plugin。

    首先安装cnpm install --save-dev optimize-css-assets-webpack-plugin

    然后引入插件。

    e3cf672222d06c8ea320422248c4b04c.png

    然后在optimization.minimizer初始化插件。

    9a22f934598c2c962d28af90a31af521.png

    运行打包命令,发现css代码已经被压缩合并了。

    插件底层也借助了splitChunksPlugin,如果css有多个入口,也可以通过cacheGroups来分割合并css代码。

    optimization: {

    splitChunks: {

    cacheGroups: {

    styles: {

    name: 'styles',

    test: /\.css$/,

    chunks: 'all',

    enforce: true // 强制忽略minChunks等设置

    }

    }

    }

    }

    复制代码

    多入口js中,如果想让各个js中引入的css打包到对应的css文件中,需要这样配置。

    optimization: {

    splitChunks: {

    cacheGroups: {

    fooStyles: {

    name: 'foo',

    test: (m, c, entry = 'foo') => // foo入口下的css打包到foo.css中

    m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,

    chunks: 'all',

    enforce: true

    },

    barStyles: {

    name: 'bar',

    test: (m, c, entry = 'bar') => // bar入口下的css打包到bar.css中

    m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,

    chunks: 'all',

    enforce: true

    }

    }

    }

    }

    复制代码

    展开全文
  • web前端篇:css练习题

    千次阅读 2019-06-12 22:08:24
    (群内会定期免费提供一些群主收藏的免费学习书籍资料以及整理好的面试和答案文档!) 如果您对这个文章有任何异议,那么请在文章评论处写上你的评论。 如果您觉得这个文章有意思,那么请分享并转发,或者也...
  • 素材地址: ... 先来看一下效果图: ...注:最下面有素材链接地址可以自己练习使用 /* 1.login最外侧盒子设定高29 背景颜色#f7f7f7 下边框1 */ /* 1.1login内容部分设置 高20 宽1200 居中*...
  • 目录 1.需求 2.代码 1.需求 2.代码(注释清晰) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>携程首页demo</title>... ...
  • <style type="text/css"> .circle{ width: 400px; height: 400px; border-radius: 400px; margin: 100px auto; border: 1px solid #000; position: relative; } .square{ width: 100px; height: 100px; ...
  • driver.find_element_by_css_selector('#workyear_list .ef').click() driver.find_element_by_css_selector(' .ul>span[title="1-3年"]').click() #点击搜索 driver.find_element_by_css_selector('.btnbox.p_sou >...
  • 最全面的300道HTML、CSS习题及面试(含答案),希望对你用帮助
  • Curso de HTML5 e CSS3 Material público para o ensino básico de HTML5 e CSS3 para alunos iniciantes. Acesse o material em PDF, analise o código disponibilizado para cada exercício e veja-os ...
  • 1000道JavaScript 、HTML、CSS习题及面试(含答案)
  • html-css练习题(系统提示)

    千次阅读 2017-09-02 00:47:24
    代码赏析: DOCTYPE html> lang="en"> charset="UTF-8"> name="viewport" content="width=device-width, initial-scale=1.0"> http-equiv="X-UA-Compatible" ...Document
  • html-css练习题 (注册表单)

    千次阅读 2017-09-02 22:51:03
    代码赏析:     lang="en">     charset="UTF-8">   name="viewport" content="width=device-width, initial-scale=1.0">   ...conten
  • <style type="text/css"> *{ margin: 0; padding: 0; } .box{ width: 200px; height: 300px; border: 1px solid #000; margin: 100px auto; } ul{ width: 100%; list-style: none; // 让ul可扩展 ...
  • 124道HTML+CSS习题及面试,前端、全栈开发面试必备;自建网站基础知识必备。来自2011腾讯前端面试稿。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,538
精华内容 4,215
关键字:

css习题