<!DOCTYPEhtml><html><head><title>动态粘性导航栏</title><style>.container{background: #00aeec;overflow: hidden;padding: 20px 0;}.title{float: left;font-size: 20px;font-weight: normal;margin: 0;margin-left: 20px;margin-right: 20px;margin-top: 2px;padding-right: 18px;border-right: 2px solid #ccc;}.list{float: left;list-style: none;border: 1px solid ;padding: 0;height: 30px;overflow: hidden scroll;margin: 0;margin-left: 20px;}.list li{height: 30px;line-height: 30px;}</style></head><body><divclass="container"><h1class="title">最新公告</h1><ulclass="list"><li>Lorem dolore hic, cumque doloremqueobcaecati minima.</li><li>Lorem alias molestias recusandaedignissimos? Iusto, natus.</li><li>Lorem vero blanditiis minima commodi evenietalias expedita, error hic nam.</li><li>Lorem aliquid a assumenda repellat saepeet. Possimus.</li></ul></div><script></script></body></html>
侧边栏浮动，主区域自适应
<!DOCTYPEhtml><html><head><title>动态粘性导航栏</title><style>.clearfix::after{content:'';display: block;clear: both;}.container{background: lightblue;width: 90%;margin: 0 auto;}.aside{float: left;background: blanchedalmond;width: 300px;margin-right: 30px;}.main{overflow: hidden;background: gray;}</style></head><body><divclass="container clearfix"><asideclass="aside">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic obcaecati atque cumque expedita nostrum saepe enim quam, voluptatibus consequatur numquam quidem dolor, molestias illum commodi perspiciatis sapiente. Necessitatibus, in nemo.</aside><divclass="main">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Exercitationem, doloremque accusamus voluptatibus cum necessitatibus iusto cupiditate blanditiis repellat, consequuntur accusantium eligendi sint provident ipsam molestiae magni a laudantium iste eaque?</div></div><script></script></body></html>
文本溢出的处理
<!DOCTYPEhtml><html><head><title>动态粘性导航栏</title><style>.single-line{border: 1px solid #101a36;width: 400px;height: 30px;line-height: 30px;color: #f40;margin: 40px 20px;/* 实现方式： */white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}.multi-line{border: 1px solid rgb(32, 22, 40);width: 400px;height: 90px;line-height: 30px;color: #f40;margin: 0 20px;/* 实现方式： */overflow: hidden;text-overflow: ellipsis;/* webkit 内核服务器特有的属性 */display: -webkit-box;/* 3 是需要开始省略（...）的行号 */-webkit-line-clamp: 3;/* 排列方式：vertical */-webkit-box-orient: vertical;}</style></head><body><pclass="single-line">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque voluptatum molestiae ducimusratione quos impedit, porro optio aliquid ipsam nostrum itaque. Cum, quibusdam consequatur sequi voluptatumofficia in temporibus exercitationem.</p><pclass="multi-line">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia officia quos placeat quasincidunt dolores esse vel libero. Quibusdam in nihil et deserunt natus sed ad nesciunt voluptatibus,exercitationem sapiente.</p><script></script></body></html>
