web前端(文本样式、元素显示模式、边框、轮廓线、定位)

网页制作,前端基础展示图片和文档 上面是图片效果,下面是简单的实现代码!最后面有素材图片一张!仅供参考!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi 阅读详情

字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            /* font-size:字体大小、字号(默认为16px) */
            font-size: 20px;

            /* font-family:字体 */
            font-family: "微软雅黑";

            /* font-weight:字体粗细(默认为normal、400) */
            font-weight: bold;

            /* font-style:字体样式 */
            font-style: normal;
            
            /* 顺序为:style、weight、size、family */
            font: italic 700 20px 宋体;/* 不推荐 */

            /* css的层叠性,属性名相同是,后面的样式会覆盖前面的样式。 */
        }
    </style>
</head>
<body>
    <p>我是一段文字,你有本事打我呀!</p>
</body>
</html>

文本样式

文本缩进

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* body{
            text-indent: 20px;
        } */

        p{
            font-size: 40px;
            /* text-indent: 32px; */
            text-indent: 2em;/* em--两字符宽度 */
        }
    </style>
</head>
<body>
    <p>
        琪亚娜,当你醒来你会发现一切都变了世界已经不再美好,那
        些平凡的日常也都一去不回。
    </p>
    <p> 
        但是不要放弃琪亚娜,抬起头继续前进吧,去把这个不完美的故
        事变成你所期望的样子这便是最后一课了。活下去,琪亚娜真......
        再喝一杯啊。
    </p>
</body>
</html>

文本对齐方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            /* text-align:对齐方式(居中的不是元素,而是内容) */
            text-align: center;
        }

        .box2{
            width: 300px;
            height: 400px;
            background-color: aquamarine;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box1">我是一个小盒子</div>
    <div class="box2">
        <img src="../day1/map.jpg" alt="" width="200px">
        <p>我是文字</p>
    </div>
</body>
</html>

文本修饰

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a{
            /* text-decoration:清除a链接默认样式 */
            /* text-decoration: none; */
            /* text-decoration: line-through; */
            /* text-decoration: underline; */
            text-decoration: overline;
        }
    </style>
</head>
<body>
    <a href="#">去百度</a>
</body>
</html>

文本大小写转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 转大写 */
        ul li:nth-child(1){
            text-transform: uppercase;
        }
        
        /* 转小写 */
        ul li:nth-child(2){
            text-transform: lowercase;
        }
    </style>
</head>
<body>
    <ul>
        <li>abc我是1li</li>
        <li>ABC我是2LI</li>
        <li>abc我是3li</li>
        <li>abc我是4li</li>
    </ul>
</body>
</html>

文本溢出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            gap: 500px;
            background-color: aqua;
            overflow: auto;/* 纵向滚动条 */
            
            /* overflow: hidden;隐藏溢出部分 */
            /* overflow: scroll;横向滚动条 */

            /* white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis; */
        }
    </style>
</head>
<body>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus illum odio animi est neque necessitatibus nulla odit quaerat debitis hic. A fugiat natus quos! Architecto rerum rem eum reiciendis repellat?
    Maiores cumque blanditiis atque mollitia laudantium quam, explicabo qui sit ad cum quis ex fuga minus eaque nostrum autem facere fugit dignissimos ipsa quae perferendis ducimus a voluptas! Suscipit, nesciunt!
    Architecto error similique mollitia repudiandae id velit consectetur dolore praesentium odit ipsa minima natus deleniti temporibus aliquid incidunt officiis quis cum sapiente laboriosam porro ad deserunt, et qui accusamus. Reprehenderit!
    Officiis animi labore deleniti! Rerum mollitia amet, quae tempore corrupti placeat nesciunt voluptatibus saepe labore quibusdam dolorum necessitatibus. Libero assumenda placeat voluptatum doloremque quis numquam quaerat esse error facilis totam.
    Tenetur facere, impedit distinctio aliquam vel, sit commodi odit sint veritatis ipsa earum facilis eveniet esse beatae adipisci iusto minus recusandae amet ut quis tempora ea libero. Eligendi, eum laboriosam.
    Explicabo dignissimos doloremque facere perspiciatis inventore libero eveniet laudantium commodi aspernatur blanditiis quam accusantium iusto delectus, nobis non quo vero officiis mollitia neque! Animi blanditiis et consequuntur? Architecto, accusamus dolore.
    Fugit neque eum facilis inventore nisi praesentium vero quidem, sequi delectus voluptates. Nesciunt et non voluptates delectus quae voluptate ut velit deleniti eius explicabo eum veniam, fugiat, quidem quasi animi!
    Earum, animi? Reprehenderit necessitatibus sint tempore, est reiciendis voluptates, eos praesentium voluptas omnis recusandae velit nemo eum saepe sunt labore placeat libero dolores suscipit exercitationem quos commodi facilis sequi! Corporis.
    Veritatis possimus esse eaque deleniti laboriosam vero, officia nostrum! Hic fugit nostrum veritatis culpa doloribus laboriosam, quidem earum. Non libero distinctio eum cum officiis inventore accusamus quae neque repudiandae voluptatem?
    Illo provident, assumenda quae deleniti rerum eligendi tempora doloremque unde pariatur, quod veritatis dolorem quas sint nihil officiis magnam minus laboriosam esse accusamus. Atque beatae, laudantium facere asperiores ipsum ratione?</div>
</body>
</html>

背景设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            /* width: 3000px; */
            height: 3000px;
            /* background-color: pink;
            background-image: url(./背景.jpg);
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: right bottom; */

            background: pink url(./背景.jpg) no-repeat right bottom;
            /* background-size: ; */
        }
    </style>
</head>
<body>
    
</body>
</html>

元素显示模式转换

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            /* 将行内元素转化为行内块元素 */
            display: inline-block;
            width: 100px;
            height: 50px;
            background-color: pink;
        }

        div {
            display: inline-block;
        }
    </style>
</head>

<body>
    <span>小盒子</span>
    <span>小盒子</span>
    <span>小盒子</span>


    <div>我是一段文字</div>

</body>

</html>

轮廓线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input{
            /* 取消轮廓线 */
            outline-style: none;
            /* outline: none; */
            
            /* 点状轮廓线
            outline-style: dotted; */
            /* 双轮廓线
            outline-style: double; */

            /* 颜色 */
            outline-color: aqua;
            
            /* 宽度 */
            outline-width: thick;
            outline-width: 50px;
        }
    </style>
</head>
<body>
    <input type="text" name="usename">
</body>
</html>

边框

边框属性设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: aqua;
            
            border: 1px solid red;
            /* 宽度 */
            border-width: 3px;
            border-bottom-width: 50px;
            border-top-width: 40px;
            
            border-color: blueviolet;
            
            border-style: solid;
            
            /* 边框弧度 */
            border-radius: 50%;
            border-top-left-radius: 50%;
            border-bottom-right-radius: 50%;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

合并相邻边框

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 合并边框 */
        table {
            border-collapse: collapse;
        }

        td {
            width: 40px;
            height: 30px;
            border: 3px solid black;
        }
    </style>
</head>

<body>


    <table cellspacing="0">
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>

        </tr>
    </table>
</body>

</html>

定位

绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .grandfather {
            position: relative;
            width: 1200px;
            height: 1200px;
            background-color: aquamarine;
        }
        
        .father{
            /* 相对定位 */
            position: relative;
            width: 800px;
            height: 800px;
            background-color: aqua;
            margin: 100px;
        }

        .son{
            width: 200px;
            height: 200px;
            font-size: 40px;
        }

        .son1{
            /* 绝对定位会放弃原来的位置(子绝父相--逐级查找父级元素是否有相对定位,如果有,以父亲为定位参考,如果没有,继续向上查找) */
            /* 绝对定位 */
            position: absolute;
            top: 50px;
            left: 90px;
            bottom: 40px;
            background-color: blue;
            /* z-index:显示的优先级 */
            z-index: 2;
        }

        .son2{
            position: absolute;
            bottom: 50px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son1">1</div>
        <div class="son2">2</div>
    </div>
</body>
</html>

固定定位

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 3000px;
            background-color: pink;
        }

        .box1 {
            /* 固定定位  相对于可视窗口进行定位   放弃原来位置 */
            position: fixed;
            top: 100px;
            width: 100px;
            height: 100px;
            background-color: aqua;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: rgb(227, 19, 206);
        }
    </style>
</head>

<body>
    <div class="box1">
        nihao
    </div>
    <div class="box2"></div>
</body>

</html>

粘性定位

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            position: sticky;
            top: 20px;
            background-color: pink;
        }
    </style>
</head>

<body>

    m dolores voluptatibus tempore explicabo. Iste deleniti animi eius exercitationem
    quidem.
    Dignissimos saepe recusandae sed, officiis similique repellat sapiente quos cupiditate repellendus deleniti. Odio
    possimus tenetur dolorum voluptatum fugit architecto. Accusantium minima ullam dolor eum numquam voluptates quas,
    consequatur nemo quibusdam.
    Explicabo a, cumque maiores iusto vero error perferendis quasi suscipit consequuntur. Cumque obcaecati sunt minus
    explicabo ab. Fugiat, quis fuga animi laudantium deserunt ipsum ex dolorem, cumque in porro sequi?
    Ex qui quasi veniam ea pariatur! Deserunt, mollitia voluptatum obcaecati vitae illo iusto voluptatibus doloremque
    perspiciatis. Quaerat odio error voluptatum expedita esse, accusamus tenetur consequuntur necessitatibus nihil
    ducimus, hic doloribus!
    Molestiae autem consequuntur dignissimos reprehenderit illum nam ratione? Quae ex officia molestias quaerat cum ad
    eos nam autem reprehenderit. Praesentium suscipit laborum aut dignissimos aperiam laboriosam officiis perferendis,
    numquam tempore corrupti recusandae modi dolorum tempora fuga quam, maiores
    architecto quae delectus cum! Ipsa laboriosam rem ut molestias quia quisquam nesciunt corporis provident asperiores
    voluptas?
    Pariatur excepturi cumque ratione iure dignissimos voluptatibus, debitis, est aliquid, quia quis sit optio.
    Perspiciatis, voluptatem. Obcaecati inventore culpa officia, eveniet odit voluptates, rem expedita saepe dicta,
    neque sit laudantium.
    Labore iste id, soluta maiores in nulla quidem deleniti? Rem odio obcaecati quis iste, delectus quam illo,
    laboriosam doloribus architecto natus blanditiis, consequatur assumenda temporibus. Aliquam voluptate eius quam
    animi.
    Sit, quis hic! Et explicabo dolore aperiam, vitae inventore, facere nulla ut a totam, illo expedita excepturi qui
    laudantium cumque labore cupiditate ex iste. Nam modi blanditiis dolorum accusantium debitis.
    Beatae aliquam perspiciatis velit sed veritatis necessitatibus vel debitis eligendi sint reprehenderit temporibus
    accusamus similique quaerat, a ratione cupiditate labore atque nulla tenetur. Consequuntur officiis perferendis,
    odit reprehenderit ratione praesentium.
    Labore ad temporibus impedit sunt autem quos accusantium repellendus magnam fugiat minus dolor laborum unde
    accusamus saepe doloribus facere voluptate mollitia, consectetur est cupiditate deserunt dolorem repudiandae
    excepturi! Eius, saepe.
    Ut id atque quaerat saepe harum vero molestiae, aut ipsum possimus maxime eum adipisci incidunt nobis earum
    perferendis laboriosam accusamus dolorum cumque ea totam. Dolorem quod architecto modi placeat consequatur?
    Incidunt reiciendis autem vel iste quaerat laboriosam maxime suscipit dolorum optio deleniti. Inventore cum vitae
    iusto quam sapiente molestias numquam sunt nulla aut fugit, explicabo porro libero eum. Dolore, pariatur!
    Vel natus, expedita aspernatur veritatis dignissimos molestiae tempora aperiam impedit maxime. Molestiae vitae
    minima labore a ipsam, facere distinctio voluptate, laudantium tempore id est quis sapiente aperiam expedita ea
    corporis!
    Sequi aut dolorem in. Id similique voluptate asperiores totam et eius accusamus provident necessitatibus
    praesentium, repellendus explicabo eveniet mollitia voluptatibus minima. Dolore alias quisquam rerum ratione quasi
    incidunt obcaecati ut.
    Amet, incidunt ipsa cupiditate quod quaerat impedit, nisi repellendus ex ad voluptate blanditiis libero iusto nulla
    consequuntur itaque nihil. Dolores ex nobis fugiat iste. Debitis vel natus pariatur explicabo totam!
    Architecto sunt minima fuga dicta et odit pariatur laboriosam recusandae in nostrum amet placeat atque aspernatur
    quo ut enim hic aut quasi provident, exercitationem voluptatum. Necessitatibus, labore! Voluptas, deleniti labore?
    Necessitatibus dolorum nisi ullam animi mollitia tempora voluptatem vel itaque numquam nam? Labore omnis
    voluptatibus, expedita in nostrum totam dolore! Perferendis iusto exercitationem veritatis ipsa nisi. Ea accusantium
    tempore reprehenderit?
    Labore laborum saepe veritatis a enim sunt quam deleniti ab temporibus quae iure ipsam cupiditate odit nulla
    eligendi dolorem obcaecati neque repudiandae alias explicabo, animi, amet vel officiis eaque? Quae?
    Perspiciatis dolorum provident, ex cumque vel aliquid temporibus error mollitia reiciendis accusamus aperiam, in
    quibusdam quidem nam amet laborum unde natus eius atque. Est sit atque modi, iure expedita aliquid!
    Provident architecto nulla ea accusantium modi itaque voluptatem, quasi ex et dignissimos dicta voluptatum commodi
    aperiam corporis minus distinctio iusto optio animi, accusamus exercitationem odit perferendis minima rerum sunt!
    Maiores!
    Numquam veniam explicabo neque exercitationem! Maxime, quo harum, earum ipsa consequuntur perferendis aliquid nisi
    maiores tempore accusantium omnis architecto? Dolorem consequatur delectus fugiat voluptatem nesciunt quasi impedit
    animi tenetur at.
    Assumenda porro beatae qui impedit esse dolores asperiores doloribus tempore ut sequi. Ipsum repudiandae at dicta,
    libero dolores labore illo deleniti in quos vero totam exercitationem cum omnis atque officiis!
    Magni cum deserunt quo dignissimos est reiciendis quos. Omnis error, cum voluptates quos aliquam repellendus
    molestiae est illum quisquam aspernatur officiis exercitationem atque porro, facilis dolorem totam debitis velit
    quia?
    Maiores perspiciatis, exercitationem saepe blanditiis, aliquid vero fuga dicta reiciendis possimus, nam commodi
    veritatis cupiditate accusamus aut incidunt tenetur soluta. Minus, eos quasi. Quidem earum sapiente saepe, doloribus
    possimus laboriosam?
    Ex debitis quae ut explicabo placeat odio ad cupiditate, laboriosam facilis doloribus deleniti rem dolorum ullam
    fuga mollitia sequi eius illum magni! Dolorem nisi nesciunt, tenetur vel soluta aliquam maiores?
    Laudantium, voluptates maxime odio et illo dolore eveniet quae laborum quibusdam nemo amet molestias eligendi eius
    possimus odit maiores doloremque quisquam? Optio fugiat, fuga architecto deserunt beatae laboriosam ea adipisci?
    Sit atque minus excepturi aliquam blanditiis similique ipsam, beatae necessitatibus molestias nam corrupti eius
    soluta, magni ratione in maiores iste laboriosam. Voluptatibus aspernatur aliquam quam eligendi eius molestiae sint
    est!
    Laudantium distinctio, quo dignissimos ipsam ullam molestias voluptas temporibus explicabo rem quos ea odio veniam
    cumque accusantium dolorem harum, illum minus ex numquam voluptatem similique! Dicta ullam in quod expedita.
    Dolores doloremque necessitatibus recusandae hic dolore. Architecto alias cumque, iusto consectetur fugiat obcaecati
    tenetur amet a esse quod ratione repudiandae culpa voluptates autem! Aspernatur minus impedit a voluptate iste
    accusamus.
    <p>Error deleniti obcaecati blanditiis totam nam, facere similique nemo illo, voluptatem voluptates assumenda
        voluptate. Laboriosam similique quas itaque at mollitia. Accusantium inventore, et in unde quia dolore! Tenetur,
        esse tempora!</p>
    Soluta non quas dicta possimus dolores distinctio consequuntur fugit rerum id corporis voluptas repudiandae, nihil
    praesentium nisi voluptatibus perferendis sequi reprehenderit quo reiciendis, dolor, iure expedita. Ullam
    consectetur corporis exercitationem.
    repellendus suscipit molestiae accusamus magni in quae optio minus,
    aut doloribus temporibus assumenda sint quaerat blanditiis exercitationem numquam cumque eveniet pariatur iste
    voluptatum. Expedita.
    Neque ipsum aspernatur laborum. Ducimus quisquam exercitationem fuga sunt recusandae! Sit ullam, dolores inventore
    ex mollitia fuga beatae nihil incidunt vero aut doloremque odit quibusdam vel animi expedita, error harum.
    Asperiores ad ullam similique numquam quisquam. Quam repellendus quia sint quas ullam incidunt earum accusamus
    consectetur quasi voluptatibus. In delectus sint libero nulla impedit possimus, aperiam autem error porro numquam.
    Quasi architecto consectetur veniam voluptate neque quis odit consequatur provident. Quod repudiandae expedita esse
    cumque obcaecati repellendus laudantium totam, reprehenderit quis ex. Tempore unde, accusamus quos nesciunt
    quibusdam facilis veritatis.
    Totam, quae autem cupiditate, officia dolorem hic impedit enim expedita blanditiis et, voluptates tempore ipsum
    quaerat tempora dolore unde nemo. Aperiam cupiditate a cumque, quod ducimus earum modi vel reprehenderit!
    Quisquam explicabo dolore enim atque magni, illo eveniet corporis illum, dolores maiores, incidunt vero vel. Hic
    velit, dolorum quo possimus, unde recusandae excepturi molestias quod placeat soluta sapiente dolore est.
    Optio in modi tenetur quisquam enim veniam illum quae nesciunt alias nostrum voluptas veritatis tempore, perferendis
    a dolor, vero quos eaque. Fuga in unde minima, blanditiis dolor rem repellendus quis!
    Nihil, ullam porro veniam cumque est magnam provident voluptas. Consequuntur fugiat in illo excepturi a aspernatur
    facilis numquam praesentium ut incidunt autem optio, recusandae possimus sequi expedita, ipsum, temporibus
    blanditiis.
    Laboriosam ipsum optio nulla repellat earum consequuntur itaque assumenda provident odio blanditiis vero excepturi
    rerum sed, quod cumque porro, ratione culpa voluptate doloremque, recusandae ipsa accusantium vel minima. Quisquam,
    autem.
    Dolores nemo sapiente temporibus aperiam mollitia a voluptas aspernatur? Consectetur porro explicabo, neque culpa
    aperiam ea, rem consequatur voluptas autem quod soluta aliquid necessitatibus, sed excepturi ratione magni omnis
    reiciendis.
    Ipsum modi dolor atque enim error, eligendi vitae eius quis? Eius repellendus doloribus hic pariatur impedit in amet
    ipsam fugit corrupti beatae incidunt suscipit consectetur similique veritatis necessitatibus, consequatur delectus.
    Cumque tempore iure similique soluta. Nostrum quae quidem perferendis vel sit, distinctio sed sint nemo blanditiis
    voluptatibus iusto saepe quisquam, obcaecati consectetur debitis maiores praesentium fuga eligendi expedita magni
    odio.
    Sed iste magni voluptatem hic blanditiis placeat cum id quasi sunt veniam commodi doloremque totam tempore
    voluptatum facere officia aspernatur, ad praesentium, vitae mollitia quod repudiandae voluptate ex esse. Rerum.
    Porro neque, ipsam animi autem illo officiis deserunt fugiat quaerat obcaecati voluptas maxime aut doloremque.
    Perspiciatis aperiam ut temporibus perferendis, praesentium sed provident nesciunt aspernatur itaque fugit,
    distinctio laboriosam at.
    Aliquid numquam nesciunt perspiciatis quis autem qui ullam dignissimos temporibus hic, quia ipsa esse, laborum,
    dolorem sed molestias voluptatum laboriosam iure minima cum fugit. Architecto voluptatum voluptatem nemo modi
    placeat.
    Asperiores consectetur soluta dolor hic laborum velit commodi temporibus veritatis, fugiat ullam esse facilis fugit
    fuga ut? Nesciunt modi doloremque, magni mollitia voluptatem quidem pariatur ipsam repellendus amet illo delectus.
    Debitis ad fugiat labore iusto vero porro sit laborum, qui blanditiis neque sint voluptas iure in veniam eum
    asperiores aspernatur ipsam enim laudantium? Blanditiis nobis sapiente earum, magni debitis quae!
    Nihil, ducimus necessitatibus? Pariatur vitae consequatur dolores dolore ullam enim animi inventore quibusdam
    asperiores ipsa in voluptate quae hic vel quidem distinctio aut nostrum magnam, excepturi aliquam a maxime saepe.
    Ea voluptas vel dicta minus doloremque sit aperiam delectus. Voluptates hic provident debitis eum tenetur unde nulla
    ullam ex? Id ratione iure modi incidunt porro quam dignissimos unde distinctio hic.
    Consequatur nam ullam commodi voluptatibus laborum, sunt quos ex alias necessitatibus deleniti! Corporis, delectus
    sequi voluptatem eveniet iure aut, voluptatibus ex sit nihil qui consequuntur, porro odio illo officia at?
    Ipsum reprehenderit voluptates cumque debitis sint amet consequatur suscipit delectus recusandae harum fugiat
    temporibus quod, dolorem veritatis architecto ratione, minima animi perspiciatis ipsa expedita soluta! Ad
    consectetur culpa dolorem nulla.
    Itaque nulla vitae voluptate, perferendis, quibusdam vero veniam porro excepturi pariatur debitis soluta in
    voluptatum commodi deleniti quasi quis. Rerum dolorem reiciendis ab soluta perspiciatis quas rem, veniam incidunt
    vel?
    Minima repudiandae repellat, non repellendus aperiam illo. Placeat labore, expedita laborum cumque similique aliquid
    optio, maiores nemo recusandae enim, eaque id iure voluptates. Nihil ex atque fugit eius ipsam quis!
    Nobis aut, non quidem, accusamus pariatur obcaecati fuga architecto voluptate laborum amet recusandae ex ipsa quod
    illum, sequi ad optio. Eligendi hic officia porro quaerat ipsam possimus quod error mollitia?
    Repudiandae perferendis quidem a numquam non minus magni est error optio tempore atque, corporis obcaecati soluta
    molestias temporibus eaque expedita, quia voluptate possimus rerum totam facere reprehenderit natus. Cupiditate,
    reprehenderit?
    Tempora praesentium alias minus est architecto, ab eum, harum repellendus consequuntur eos veritatis veniam,
    reprehenderit qui culpa voluptatibus facilis! Ipsa nulla repudiandae voluptates maxime saepe blanditiis expedita
    nemo facilis quam?
    Beatae animi fuga velit aspernatur architecto explicabo! Iusto totam dolorem quos labore asperiores alias enim! Sint
    impedit earum debitis commodi error, quisquam labore maiores vel nostrum vero dolore, aut modi.
    Nihil, quibusdam assumenda veritatis consequatur fugiat ut perspiciatis illum. Reiciendis, impedit cumque. Sunt
    laudantium esse odit deserunt maiores in quis, iure vitae exercitationem laborum corrupti sapiente possimus
    adipisci. Placeat, ipsa?
    Iusto odio inventore illum libero, quae aspernatur facilis nihil neque asperiores sit modi alias maiores unde,
    pariatur, sunt corrupti perferendis voluptatem nostrum quam. Voluptatem perferendis sunt vero? Dolorem,
    voluptatibus! Facilis?
    Nemo amet eveniet reiciendis, animi facere adipisci molestias id! Nobis, enim. Laborum rem minus nesciunt, nobis
    perferendis mollitia, id aspernatur iste iusto quaerat quis maiores, molestias beatae praesentium laboriosam
    excepturi.
    Quos, doloremque! Tempore doloribus quo perspiciatis, quos cumque at, suscipit reprehenderit delectus, accusantium
    quis saepe vel totam nam impedit illum consequuntur commodi amet dolorem. Hic omnis inventore quis alias iste?
    Eligendi rem, tempore sed corrupti ipsum praesentium. Nostrum nulla soluta atque in, illum obcaecati perferendis
    asperiores id voluptatem facere odit rem, expedita, veniam quisquam aspernatur mollitia fuga? Nemo, accusamus
    dignissimos.
    Deserunt cum dolorum alias nesciunt aliquid dignissimos esse dolorem quidem hic aperiam! Voluptatum quos rerum
    nostrum tempore placeat accusamus, ex ipsum earum quaerat, sint eius dicta delectus voluptatibus quae. Dolorem.
    Totam ut iste quas odit voluptate eos nostrum minima, vitae labore quasi voluptatum inventore quae corrupti
    asperiores ab aut veritatis numquam error. Officiis, exercitationem repellat. Molestias sint suscipit voluptatum
    aspernatur?
    Vel dolore maiores sapiente impedit minus eaque assumenda totam unde quasi? Assumenda corporis obcaecati inventore
    suscipit, magni harum. Voluptatum expedita quaerat laboriosam recusandae velit? Sapiente expedita optio totam non
    veniam?
    Dolore, aliquam! Maxime praesentium totam cupiditate quod, repudiandae voluptas, quisquam eaque fugit quo dolore
    voluptatem eveniet consequatur amet repellat exercitationem soluta repellendus sequi aliquid nostrum alias laborum
    fugiat at! Veritatis.
    Voluptates, assumenda. Corporis necessitatibus dolorum cupiditate, quo fugiat, et soluta aliquid porro repellat
    optio quisquam non autem temporibus! Earum rem accusantium, saepe omnis laboriosam facilis dolorum itaque fugiat
    voluptatum maxime!
    Culpa vero repellendus ducimus nisi nesciunt praesentium accusamus nostrum voluptate, tenetur sequi? Quam sapiente,
    quaerat odio inventore maiores itaque ex pariatur maxime aut autem rerum laudantium! Sed quas nihil pariatur!
    Provident ipsum a ratione possimus nulla, cupiditate, dolorem vero autem suscipit quaerat aliquid! Ipsum, harum
    tenetur, doloribus expedita delectus ullam blanditiis repellat, quis nisi vitae temporibus nobis molestiae autem
    perspiciatis!
    Necessitatibus recusandae suscipit repellendus aliquam praesentium placeat eveniet aut consequatur sequi totam dolor
    cum officiis, harum corrupti fuga doloribus eius vero quidem dolores culpa porro iure deserunt quo ratione!
    Quisquam.
    Sit at, cumque possimus ipsa voluptatibus harum recusandae ex, quos sequi nostrum autem hic. Inventore commodi
    veritatis sapiente eum atque id minima et modi aspernatur quibusdam iusto, ipsam laborum debitis.
    Obcaecati, harum. Totam, distinctio reprehenderit praesentium deleniti suscipit nisi omnis, et magni perspiciatis,
    inventore quae consectetur quos numquam illum nam iure amet delectus officiis cumque veritatis impedit libero sit
    exercitationem.
</html>

NSGA-III相关笔记 NSGA-III目录目的区别NSGA-III的算法流程非支配排序详解归一化详解 目录 NSGA-III基于matlab的实现 参考文献 1.An Evolutionary Many-Objective Optimization Algorithm Using Reference-point Based Non-dominated Sorting Approach,Part I: Solving P... 阅读详情

相关推荐

Ros入门 (十)----激光雷达避障 简易实现

本篇文章通过订阅/scan话题获取障碍物的距离信息,达到避障目的,提供部分代码,仅供参考。

weixin_51157015的博客 1万+

前端显示文本时的格式设置

有时,前端页面文字内容需要按照我们输入的格式显示,比如,我们输入换行、空格,这些在文字显示时都需要显示出来。这里有一个较为简单的解决方式 前端显示界面: 代码: <div class="btn-group" role="group" aria-label="..." style="margin-left: 900px"> <button id="editText" type="button" class="btn btn-default">编辑内容</button&g

Noodles小飞 2744

基于深度学习的图像修复算法python源码+数据集+论文文档(毕业设计)

基于深度学习的图像修复算法python源码+数据集+论文文档(毕业设计),个人经导师指导并认可通过的高分设计项目,评审分99分,代码完整确保可以运行,小白也可以亲自搞定,主要针对计算机相关专业的正在做大作业的学生和需要项目实战练习的学习者,可作为毕业设计、课程设计、期末大作业,代码资料完整,下载可用。基于深度学习的图像修复算法python源码+数据集+论文文档(毕业设计)基于深度学习的图像修复算法python源码+数据集+论文文档(毕业设计)基于深度学习的图像修复算法python源码+数据集+论文文档(毕业设计)基于深度学习的图像修复算法python源码+数据集+论文文档(毕业设计)基于深度学习的图像修复算法python源码+数据集+论文文档(毕业设计)基于深度学习的图像修复算法python源码+数据集+论文文档(毕业设计)基于深度学习的图像修复算法python源码+数据集+论文文档(毕业设计)基于深度学习的图像修复算法python源码+数据集+论文文档(毕业设计)基于深度学习的图像修复算法python源码+数据集+论文文档(毕业设计)基于深度学习的图像修复算法python源码+数据集+论文文档(毕业设计)基于深度学习的图像修复算法python源码+数据集+论文文档(毕业设计)基于深度学习的图像修复算法python源码+数据集+论文文档(毕业设计)基于深度学习的图像修复算法python源码+数据集+论文文档(毕业设计)基于深度学习的图像修复算法python源码+数据集+论文文档(毕业设计)基于深度学习的图像修复算法python源码+数据集+论文文档(毕业设计)基于深度学习的图像修复算法python源码+数据集+论文文档(毕业设计)基于深度学习的图像修复算法python源码+数据集+论文文档(毕业设计)基于深度学习的图像修复算法python源码+数据集+论文文档(毕业设计

Web前端开发之CSS学习笔记4—边框、边距、元素尺寸

边界 border边框 语法:border:border-width|border-style|border-color; border-width:规定边框的宽度 border-style:规定边框样式 border-color:规定边框的颜色 例子: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>边界</title> &

qq_45709187的博客 8465

Web基础(从零开始)——CSS盒子模型详解(边框,圆角边框,内边距,导航栏,外边距,父元素塌陷问题,盒子阴影)

1.边框(border):边框有三部分组成边框宽度、边框样式边框颜色 border-width(边框粗细):6px;|| border-style(边框样式):solid(实线边框) | dashed(虚线边框) |dotted(点线) ||border-color(边框颜色) 以上属性可以简写:border:1px solid red;(没有顺序) ...

qq_57633498的博客 2534

[css3] 动画案例---会呼吸的圆

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do

qq_14993591的博客 2458

web前端文本

文本,flex问题,float问题,2D,3D,动画

m0_75008371的博客 2515

Web前端css

div{ box-shadow:20px 20px 10px 10px 颜色;<style> ul li:nth-child(n){ 操作 }(总的第n行) ul li:nth-of-type(n){ 操作 }(同一类的第n行)

wisdom_serein的博客 328

web 前端 Day 3

a:link {a:hover { 鼠标悬停鼠标样式a:active {div{​​<a href="#">去百度</a>

Ljn45521的博客 234

Web前端3

如果需要,内容将被裁减以适应边距(padding)盒。无论是否实际裁剪了任何内容,浏览器总是显示滚动条,以防止滚动条在内容改变时出现或者消失。如果需要,内容将被裁减以适应边距(padding)盒。不提供滚动条,也不支持允许用户滚动(例如通过拖拽或者使用滚轮)。text-transform: lowercase——将内容中字母大写转化为小写。注释: text-transform: uppercase——将内容中字母小写转化为大写。方法), 因此该元素仍然是一个滚动的容器。以编程的方式滚动(例如,通过设置。

hjdjfn的博客 106

web前端基础(三)

CSS(三) 文章目录web前端基础(三)一、前言二、具体内容.CSS web前端基础(三) 本文仅是学习过程中的简略笔记,如有错误,烦请指正。 提示:以下是本篇文章正文内容,下面案例可供参考 一、前言 css设置网页元素的外观样式,行为 二、具体内容 .CSS 定位定位模式+边偏移 边偏移: 顶端边偏移:top: ___px 元素与其父亲上边线的距离 底部偏移量:bottom:___px 左侧偏移量:left: 右侧偏移量:right: 定位模式: 选择器{ position:属性值;} St.

qq_50799537的博客 579

web前端笔记1-hml,css部分

这里写目录标题一.基础内容1.网页1.1什么是网页1.2什么是HTML1.3网页的形成2.常用浏览器2.1常用的浏览器2.2浏览器内核3.web标准3.1为什么需要web标准3.2web标准组成二.HTML1.HTML语法规范1.1基本语法1.2标签关系2.HTML基本结构标签(骨架标签)3.常用开发工具3.1文档类型声明标签3.2lang语言种类3.3字符集4.HTML常用标签4.1标签语义4.2标题标签`-`4.3段落标签与换行标签4.4文本格式化标签![在这里插入图片描述](https://img-b

bantoumingasong的博客 6917

web前端第三天

盒子阴影:box-shadow:20px(x偏移量)20px(y偏移量)10px(阴影模糊半径)10px(阴影扩散半径)black(阴影颜色)overflow:元素溢出时所需的行为,即当元素的内容大于块级格式化上下文时。用来描述一个元素的特殊状态,比如第一个元素、某个元素的子元素要点击的元素。简写:background:fixed url() no-repeat;position:absolute:绝对定位,不保留原来位置。文字阴影:text-shadow:5px 5px red。

qwer2193940422的博客 134

web()前端

13.padding影响盒子大小问题。3.元素显示模式转换。

qq_52178594的博客 347

web前端3

固定定位:相对于可视区域进行定位。z-index 定位中显示的优先级。4.元素显示模式转换。

m0_75020145的博客 83

HTML+CSS学习笔记(pink老师前端课程笔记--补档)

开始于2021年8月3日09点59分 课程学习路线:HTML5-> CSS3->H5C3提高->项目拼优购电商网站 仅更新到H5C3提高的C3提高部分(新增选择器),忙于其他事情,暂不继续更新 文章目录HTML1. HTML标签2. HTML基本结构标签3. 网页开发工具4. 标签语义5. 特殊字符6. 表格标签7. 列表8. 表单CSS基础1. 简介2. 选择器3. 字体属性4. 文本属性5. 引入方式6. chorme调试工具CSS入门1. Emmet语法1.1 快速生成HTML

Tiimmi丶的博客 1万+

web前端css)第二天笔记

top/left/right: //距离顶部/左部/右边多远(若所有上级都没有相对定位,则根据浏览器)transform:rotaze(1/0,1/0,1/0,xxdeg) //让几个轴同时转,1转 0不转。transform:rotazeX/Y/Z(40deg) //绕X/Y/Z轴旋转,deg是单位度。transform:rotazeX/Y/Z(40deg) //绕X/Y/Z轴旋转,deg是单位度。

huangheping0803的博客 97

WEB前端笔记3

【代码】WEB前端笔记3

weixin_54986292的博客 99

web前端 -02

ul li::befor(在选中文字前)/after(后)/placeholder(与input连用,input应在form表单里,修改表单中的提示词)/selection(文字选中时){a:active(点击中)/hover(悬停)/link(点击前)/visited(点击后){/*元素隐藏,位置保留 *//* 行内元素无法设置宽、高 转换为行内块元素 *//* 行高 单行文本垂直居中 行高=元素高度*/——改变文字对齐方式。/*缩进 em为字体大小*//* 文本水平对齐方式 */

yscpc07的博客 77

我的前端笔记

本入门笔记配套pink老师的前端教程。附:代码规范 一章来自课程资料,附在笔记中方便查看,警醒自己养成代码规范的好习惯。

2401_83579254的博客 754
上一篇: css实现焦点图切换
下一篇: web前端(盒子模型、颜色渐变、css的继承性、浮动、2d转换、3d转换、过度、动画)
还有醒着的咩
博客等级 码龄4年 347粉丝 · 76原创
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值