css前端笔考题-分别用2、3、5个div实现十字架效果 - HTML/CSS当前位置:& &&&css前端笔考题-分别用2、3、5个div实现十字架效果css前端笔考题-分别用2、3、5个div实现十字架效果&&网友分享于：&&浏览：204次css前端笔试题--分别用2、3、5个div实现十字架效果
&!DOCTYPE HTML&
&style type="text/css"&
background:
margin: -25px 0px 0px -75
height:150
margin: -75px 0px 0px -25
&!-- 用两个div实现十字架 --&
&div id="d1"&&/div&
&div id="d2"&&/div&
&!DOCTYPE HTML&
&style type="text/css"&
background:
margin: -75px 0px 0px -25
margin: -25px 0px 0px -75
margin: 25px 0px 0px -25
&!-- 用三个div实现十字架 --&
&div id="d1"&&/div&
&div id="d2"&&/div&
&div id="d3"&&/div&
&!DOCTYPE HTML&
&style type="text/css"&
background:
margin: -75px 0px 0px -25
[id ^= d2]{
margin: -25px 0px 0px -25
margin-left:-75
margin-left:25
margin: 25px 0px 0px -25
&!-- 用五个div实现十字架 --&
&div id="d1"&&/div&
&div id="d2_1"&&/div&
&div id="d2_2"&&/div&
&div id="d2_3"&&/div&
&div id="d3"&&/div&
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 12345678910 Copyright & &&版权所有requirejs&angluarjs
& &controller
& && &ctr1.js
& && &ctr2.js
& &service
& && &ser1.js
& && &ser2.js
& &app.js//加载所有页面共用模块，如angular,bootstrap,routeDef,并配置路由
& &main.js//主入口文件，包括require.conf,引入app.js,手动启动angular
& &routeDef.js//注册控制器，并返回路由配置项
& &angular
&&bootstrap
& &view1.html
& &view2.html
index.html//唯一入口页面
index.html
html 代码效果预览&html&
&title&AngularJS + ui-router + RequireJS异步加载注册controller&/title&
&a href=”#home”&home&/a&
&a href=”#local”&local&/a&
&div ui-view&&/div&
&script type=”text/javascript” src=”lib/require.js” data-main=”js/main”&&/script&
只需要引入requireJs,指明入口函数main.js，(手动启动angularjs,不用为首页添加ng-app=’myModule’)。myModule为你的应用模块名，自定义
javascript 代码效果预览require.config({
baseUrl: ‘js’,
‘app': ‘app’,
‘angular': ‘../lib/angular.min’,
‘router': ‘../lib/angular-ui-router’,
‘bootstrap': ‘../lib/ui-bootstrap’,
‘routdef': ‘routeDef’
‘angular': {
exports: ‘angular’
‘bootstrap':{
deps: ['angular']
‘router': {
deps: ['angular']
deps: ['router']
// 初始化myModule模块
require(['app'],function(){
angular.bootstrap(document, ['myModule'])
app.js //引入公共依赖
javascript 代码效果预览define(['routdef','angular','bootstrap','router'],function(routdef){
var app = angular.module(“myModule“, ['ui.router'])
app.config(function($controllerProvider,$compileProvider,$filterProvider,$provide){
app.register = {
//得到$controllerProvider的引用
controller : $controllerProvider.register,
//同样的，这里也可以保存directive／filter／service的引用
directive: $compileProvider.directive,
filter: $filterProvider.register,
service: $provide.service
.config(['$stateProvider','$urlRouterProvider',function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('home');
$stateProvider
.state(&home&,routdef.config(&/home&,'homeCtrl','partials/view1.html','controller/homeCtrl'))
.state(&local&,routdef.config(&/local&,'localCtrl','partials/view2.html','controller/localCtrl'))
routeDef.js
javascript 代码效果预览define(['angular','router'], function () {
function config(urlStr,controllerStr,templateUrlStr,resolveCtrlStr) {
var defer,routeDef = {};
if(urlStr){
routeDef.url = urlS
routeDef.controller = controllerS
routeDef.templateUrl = templateUrlS
routeDef.resolve={
loadCtrl: [&$q&, function($q) {
var deferred = $q.defer();
//异步加载controller／directive/filter/service
resolveCtrlStr
], function() { deferred.resolve(); });
return deferred.
return routeD
config:config
ctr1.js&&单个模块的js文件，包括（控制器，指令，过滤器）
javascript 代码效果预览define(['app','service/booksService'],function(app){
app.register.controller('homeCtrl', function($scope,booksService){
$scope.str = 'home page';
$scope.sex = 0;
$scope.books = booksService.
//《AngularJS过滤器filter入门》/wangmeijian/p/4979452.html
app.register.filter('sexFilter', function(){
return function(sex){
return ['男','女'][sex];
//《AngularJs指令配置参数scope详解》/wangmeijian/p/4944030.html
app.register.directive('myDirective', function(){
restrict: &E&,
replace: true,
template: &&div&&span&我是由自定义指令渲染出来的&/span&&/div&&
ser1.js 各模块通用js(比方说统一分页，下拉列表等等)
javascript 代码效果预览define(['app'],function(app){
//Service比较特殊，加载后还需要手动注入控制器
app.register.service('booksService', function(){
this.books = [
name: 'javascript权威指南'
name: 'javascript高级程序设计'
参考资料：
53 总笔记数
2.1万 总阅读量
Copyright &
All Rights Reserved.
合作伙伴：angluarjs2 美化DOM操作 - 推酷
angluarjs2 美化DOM操作
” 后，页面需要展示到用户面前当然需要通 class 或 style 进行的。那么在 template 块中怎么操作？
1. 添加 class
昨天的例子 [class.selected]（完整代码如下） ，我们知道 [xxx] 形式是接收内容。 在 angluarjs2 中定义子 ngClass 也可以class 调用。[class.selected] 这样调用的是什么套路 。 除了这么调用，还有其他方式吗 ？ [class]=”className” ，[class.className]=”true” ， [class]=”[‘className1′,’className2′]” 有这种情况 。更多
[class.selected]=&isSelected(myProduct)&
2. 地址 src
在 ng-book 书上说，支持第一种方式 。 不推荐 。
&img [src]=&imageUrl&&
&img src=&{{ imageUrl }}&&
3. style 也站出来
一般的 style 行内样式也是一种类型 。 我们使用如下。 多个样式属性怎么办 ？ 更多
]=&value&.
通过 class , style , src 这些调用 样式 和 连接资源 ，可以出 angularjs2 有一些内制对象。 那么这些内置对象，我们怎么找到API？ 内置对象不会与定义有冲突 ？
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致快速建站必备！细数2014年5个最流行的前端框架（2）
Semantic UI&一直在努力让网站建设更加语义化。它利用了自然语言的原则，使得代码更容易读更容易理解。
发布时间：2013
最新版本：1.2.0
流行程度：GitHub 上 12,900+ 的 star
介绍：&一个 UI 模块框架，基于来自自然语言的一些有用的原则。&
核心理念/原则：语义化、tag ambivalence、响应式
框架大小：552 KB
预处理器：Less
响应式：是
模块化：是
上手模块/布局：无
字体图标：Font Awesome
插件/扩展：无
特色组件：Divider、Flag、Rail、Reveal、Step、Advertisement、Card、Feed、Item、Statistic、DimmerRating、Shape
文档：非常好。Semantic 有组织良好的文档，外加一个提供指南，帮助用户快速上手，自定义和创建主题。
自定义：无 GUI 的自定义工具，需手动修改
浏览器支持：Firefox、Chrome、Safari、IE10+ (IE9需要prefix支持)、Android 4、Blackberry 10
开源协议：MIT
Semantic UI 使用心得
在这些框架中，Semantic 是最具革命性特性最全的框架。为了让样式逻辑清晰，语义化，整个框架的结构以及命名约定都要优于其他框架。
Pure&是一个轻量的、模块化的框架&&使用纯 CSS 编写的&&根据你的需要，可以组合或者分开使用 Pure 的模块。
作者：Yahoo
发布时间：2013
当前版本：0.5.0
流行程度：GitHub 上 9,900+ 的 star
介绍：&一系列小的，响应式的 CSS 模块，可以用在你的每一个项目中。&
核心理念/原则：、极简主义
框架大小：18 KB
预处理器：无
响应式：是
模块化：是
上手模块/布局：有
字体图标：无，你可以使用 Font Awesome
插件/扩展：无
特色组件：无
自定义：基础的 GUI 皮肤构造工具
浏览器支持：最新的Firefox、Chrome、Safari； IE7+、iOS 6.x、7.x；Android 4.x
开原协议：
Pure 使用心得
Pure 只提供一套极简的样式，便于你从零开始你的项目。对于那些不需要一个全栈框架，只需要某些组件的加入到他们自己的项目中的用户来讲，这个框架非常符合。
UIkit&包含了一些列简洁的易用的便于自定义的组件。尽管它没有其他在列的框架流行，但是它提供了相当的功能和质量。
发布时间：2013
当前版本：2.13.1
流行程度：GitHub 上 3,800+ 的 star
介绍：&轻量的，模块化的前端框架，可用来快速构建强大的网页界面&
核心理念/原则：响应式、移动优先
框架大小：118 KB
预处理器：Less、Sass
响应式：是
模块化：是
上手模块/布局：是
字体图标：Font Awesome
插件/扩展：有
特色组件：Article、Flex、Cover、HTML Editor
自定义：高级的 GUI 自定义工具
浏览器支持：Chrome, Firefox, Safari, IE9+
开原协议：MIT
UIkit 使用心得
UIkit 在WordPress 主题中很成功。它提供了强大灵活的自定义机制，可以手动修改或者使用它的提供的 GUI 自定义工具来实现。
如何选择框架？
最后，我来给一些选择框架的建议。下面是一些选择框架需要注重的点:
这个框架足够流行吗？流行意味着有更多的人参与到项目中来，因此，社区中有更多的文章和教程，现实中更多的示例和网站，会有更多的第三方扩展，当然能够更好地与现实的web开发项目结合。极其流行意味着这个框架经得住未来的考验；
拥有庞大社区的框架最不可能被抛弃；
框架是否还在活跃地开发中？一个优秀的框架需要不断地提升自己，紧跟最新 Web 技术的发展，尤其对于移动来说；
这个框架是否已经成熟？如果某个框架还没有在真实项目中充分地使用和测试，只可能试着玩玩，如果用到专业的项目中的话并不是一个明智的选择；
框架是否有完善的文档？最后好能有完善的文档，这样可以加快学习的进程；
框架的详细程度如何？这里核心的点在于一个更通用的框架更容易使用，比较于那些详细程度很高的框架而言。在很多情况下，最好的就是选择一个有最少样式的框架，因为这样的话比较容易自定义。添加新的 CSS 规则要比比对复写现有的样式规则方便多了。而且，如果你在已有的样式上添加新的样式，你最终获得的就是无用的样式规则，这将会增加 CSS 文件的大小。
最后，如果你还是不确定，你可以采用一种混合搭配的方式。如果某个框架无法满足你的需求，你可以混用一些来自其他框架来的组件。例如，你可以使用某个框架的精简的 CSS 基础样式，使用来自另外一个框架的栅格系统，以及从第三个框架更为复杂的模块。模块化万岁！
你怎么看的？这些框架还有哪些策略或者弱点在这里没有提到的？还有哪些框架你觉得应该列举在这里？你可以在下面回复给我们。
延伸阅读：
注：相关网站建设技巧阅读请移步到频道。
看过本文的人还看过
最新图文推荐
最新专栏文章
大家感兴趣的内容
&&<a rel="nofollow" class="red" href="" target="_blank" color="red新版网站排行榜
===全新上线===
网友热评的文章AngularJS 教程
AngularJS 教程
AngularJS 通过新的属性和表达式扩展了 HTML。
AngularJS 可以构建一个单一页面应用程序（SPAs：Single Page Applications）。
AngularJS 学习起来非常简单。
每个章节都有相应的实例
在每个章节中，您可以在线编辑实例，然后点击按钮查看结果。
AngularJS 实例
&!DOCTYPE html&
&meta charset="utf-8"&
&script src="http://cdn./libs/angular.js/1.4.6/angular.min.js"&&/script&
&div ng-app=""&
& &p&名字 : &input type="text" ng-model="name"&&/p&
& &h1&Hello {{name}}&/h1&
阅读本教程前，您需要了解的知识：
在开始学习 AngularJS 之前，您需要具备以下基础知识：
JavaScript
AngularJS 历史
AngularJS 是比较新的技术，版本 1.0 是在 2012 年发布的。
AngularJS 是由 Google 的员工 Mi?ko Hevery 从 2009 年开始着手开发。
这是一个非常好的构想，该项目目前已由 Google 正式支持，有一个全职的开发团队继续开发和维护这个库。
AngularJS 实例
本教程包含了大量的 AngularJS 实例！
AngularJS 参考手册
参考手册包含了本教程中使用到的所有指令和过滤器。